A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

Overview

SimpleMDE - Markdown Editor

A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allows users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts. In addition, the syntax is rendered while editing to clearly show the expected result. Headings are larger, emphasized words are italicized, links are underlined, etc. SimpleMDE is one of the first editors to feature both built-in autosaving and spell checking.

Demo

Preview

Why not a WYSIWYG editor or pure Markdown?

WYSIWYG editors that produce HTML are often complex and buggy. Markdown solves this problem in many ways, plus Markdown can be rendered natively on more platforms than HTML. However, Markdown is not a syntax that an average user will be familiar with, nor is it visually clear while editing. In otherwords, for an unfamiliar user, the syntax they write will make little sense until they click the preview button. SimpleMDE has been designed to bridge this gap for non-technical users who are less familiar with or just learning Markdown syntax.

Install

Via npm.

npm install simplemde --save

Via bower.

bower install simplemde --save

Via jsDelivr. Please note, jsDelivr may take a few days to update to the latest release.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

Quick start

After installing, load SimpleMDE on the first textarea on a page

<script>
var simplemde = new SimpleMDE();
</script>

Using a specific textarea

Pure JavaScript method

<script>
var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });
</script>

jQuery method

<script>
var simplemde = new SimpleMDE({ element: $("#MyID")[0] });
</script>

Get/set the content

simplemde.value();
simplemde.value("This text will appear in the editor");

Configuration

  • autoDownloadFontAwesome: If set to true, force downloads Font Awesome (used for icons). If set to false, prevents downloading. Defaults to undefined, which will intelligently check whether Font Awesome has already been included, then download accordingly.
  • autofocus: If set to true, autofocuses the editor. Defaults to false.
  • autosave: Saves the text that's being written and will load it back in the future. It will forget the text when the form it's contained in is submitted.
    • enabled: If set to true, autosave the text. Defaults to false.
    • delay: Delay between saves, in milliseconds. Defaults to 10000 (10s).
    • uniqueId: You must set a unique string identifier so that SimpleMDE can autosave. Something that separates this from other instances of SimpleMDE elsewhere on your website.
  • blockStyles: Customize how certain buttons that style blocks of text behave.
    • bold Can be set to ** or __. Defaults to **.
    • code Can be set to ``` or ~~~. Defaults to ```.
    • italic Can be set to * or _. Defaults to *.
  • element: The DOM element for the textarea to use. Defaults to the first textarea on the page.
  • forceSync: If set to true, force text changes made in SimpleMDE to be immediately stored in original textarea. Defaults to false.
  • hideIcons: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar.
  • indentWithTabs: If set to false, indent using spaces instead of tabs. Defaults to true.
  • initialValue: If set, will customize the initial value of the editor.
  • insertTexts: Customize how certain buttons that insert text behave. Takes an array with two elements. The first element will be the text inserted before the cursor or highlight, and the second element will be inserted after. For example, this is the default link value: ["[", "](http://)"].
    • horizontalRule
    • image
    • link
    • table
  • lineWrapping: If set to false, disable line wrapping. Defaults to true.
  • parsingConfig: Adjust settings for parsing the Markdown during editing (not previewing).
    • allowAtxHeaderWithoutSpace: If set to true, will render headers without a space after the #. Defaults to false.
    • strikethrough: If set to false, will not process GFM strikethrough syntax. Defaults to true.
    • underscoresBreakWords: If set to true, let underscores be a delimiter for separating words. Defaults to false.
  • placeholder: Custom placeholder that should be displayed
  • previewRender: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
  • promptURLs: If set to true, a JS alert window appears asking for the link or image URL. Defaults to false.
  • renderingConfig: Adjust settings for parsing the Markdown during previewing (not editing).
    • singleLineBreaks: If set to false, disable parsing GFM single line breaks. Defaults to true.
    • codeSyntaxHighlighting: If set to true, will highlight using highlight.js. Defaults to false. To use this feature you must include highlight.js on your page. For example, include the script and the CSS files like:
      <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
  • shortcuts: Keyboard shortcuts associated with this instance. Defaults to the array of shortcuts.
  • showIcons: An array of icon names to show. Can be used to show specific icons hidden by default without completely customizing the toolbar.
  • spellChecker: If set to false, disable the spell checker. Defaults to true.
  • status: If set to false, hide the status bar. Defaults to the array of built-in status bar items.
    • Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items.
  • styleSelectedText: If set to false, remove the CodeMirror-selectedtext class from selected lines. Defaults to true.
  • tabSize: If set, customize the tab size. Defaults to 2.
  • toolbar: If set to false, hide the toolbar. Defaults to the array of icons.
  • toolbarTips: If set to false, disable toolbar button tips. Defaults to true.
// Most options demonstrate the non-default behavior
var simplemde = new SimpleMDE({
	autofocus: true,
	autosave: {
		enabled: true,
		uniqueId: "MyUniqueID",
		delay: 1000,
	},
	blockStyles: {
		bold: "__",
		italic: "_"
	},
	element: document.getElementById("MyID"),
	forceSync: true,
	hideIcons: ["guide", "heading"],
	indentWithTabs: false,
	initialValue: "Hello world!",
	insertTexts: {
		horizontalRule: ["", "\n\n-----\n\n"],
		image: ["![](http://", ")"],
		link: ["[", "](http://)"],
		table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text      | Text     |\n\n"],
	},
	lineWrapping: false,
	parsingConfig: {
		allowAtxHeaderWithoutSpace: true,
		strikethrough: false,
		underscoresBreakWords: true,
	},
	placeholder: "Type here...",
	previewRender: function(plainText) {
		return customMarkdownParser(plainText); // Returns HTML from a custom parser
	},
	previewRender: function(plainText, preview) { // Async method
		setTimeout(function(){
			preview.innerHTML = customMarkdownParser(plainText);
		}, 250);

		return "Loading...";
	},
	promptURLs: true,
	renderingConfig: {
		singleLineBreaks: false,
		codeSyntaxHighlighting: true,
	},
	shortcuts: {
		drawTable: "Cmd-Alt-T"
	},
	showIcons: ["code", "table"],
	spellChecker: false,
	status: false,
	status: ["autosave", "lines", "words", "cursor"], // Optional usage
	status: ["autosave", "lines", "words", "cursor", {
		className: "keystrokes",
		defaultValue: function(el) {
			this.keystrokes = 0;
			el.innerHTML = "0 Keystrokes";
		},
		onUpdate: function(el) {
			el.innerHTML = ++this.keystrokes + " Keystrokes";
		}
	}], // Another optional usage, with a custom status bar item that counts keystrokes
	styleSelectedText: false,
	tabSize: 4,
	toolbar: false,
	toolbarTips: false,
});

Toolbar icons

Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JS. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the title="" attribute. Note that shortcut hints are added automatically and reflect the specified action if it has a keybind assigned to it (i.e. with the value of action set to bold and that of tooltip set to Bold, the final text the user will see would be "Bold (Ctrl-B)").

Additionally, you can add a separator between any icons by adding "|" to the toolbar array.

Name Action Tooltip
Class
bold toggleBold Bold
fa fa-bold
italic toggleItalic Italic
fa fa-italic
strikethrough toggleStrikethrough Strikethrough
fa fa-strikethrough
heading toggleHeadingSmaller Heading
fa fa-header
heading-smaller toggleHeadingSmaller Smaller Heading
fa fa-header
heading-bigger toggleHeadingBigger Bigger Heading
fa fa-lg fa-header
heading-1 toggleHeading1 Big Heading
fa fa-header fa-header-x fa-header-1
heading-2 toggleHeading2 Medium Heading
fa fa-header fa-header-x fa-header-2
heading-3 toggleHeading3 Small Heading
fa fa-header fa-header-x fa-header-3
code toggleCodeBlock Code
fa fa-code
quote toggleBlockquote Quote
fa fa-quote-left
unordered-list toggleUnorderedList Generic List
fa fa-list-ul
ordered-list toggleOrderedList Numbered List
fa fa-list-ol
clean-block cleanBlock Clean block
fa fa-eraser fa-clean-block
link drawLink Create Link
fa fa-link
image drawImage Insert Image
fa fa-picture-o
table drawTable Insert Table
fa fa-table
horizontal-rule drawHorizontalRule Insert Horizontal Line
fa fa-minus
preview togglePreview Toggle Preview
fa fa-eye no-disable
side-by-side toggleSideBySide Toggle Side by Side
fa fa-columns no-disable no-mobile
fullscreen toggleFullScreen Toggle Fullscreen
fa fa-arrows-alt no-disable no-mobile
guide This link Markdown Guide
fa fa-question-circle

Customize the toolbar using the toolbar option like:

// Customize only the order of existing buttons
var simplemde = new SimpleMDE({
	toolbar: ["bold", "italic", "heading", "|", "quote"],
});

// Customize all information and/or add your own icons
var simplemde = new SimpleMDE({
	toolbar: [{
			name: "bold",
			action: SimpleMDE.toggleBold,
			className: "fa fa-bold",
			title: "Bold",
		},
		{
			name: "custom",
			action: function customFunction(editor){
				// Add your own code
			},
			className: "fa fa-star",
			title: "Custom Button",
		},
		"|", // Separator
		...
	],
});

Keyboard shortcuts

SimpleMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option. The list of default ones is as follows:

Shortcut Action
Cmd-' "toggleBlockquote"
Cmd-B "toggleBold"
Cmd-E "cleanBlock"
Cmd-H "toggleHeadingSmaller"
Cmd-I "toggleItalic"
Cmd-K "drawLink"
Cmd-L "toggleUnorderedList"
Cmd-P "togglePreview"
Cmd-Alt-C "toggleCodeBlock"
Cmd-Alt-I "drawImage"
Cmd-Alt-L "toggleOrderedList"
Shift-Cmd-H "toggleHeadingBigger"
F9 "toggleSideBySide"
F11 "toggleFullScreen"

Here is how you can change a few, while leaving others untouched:

var simplemde = new SimpleMDE({
	shortcuts: {
		"toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
		"toggleCodeBlock": null, // unbind Ctrl-Alt-C
		"drawTable": "Cmd-Alt-T" // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
	}
});

Shortcuts are automatically converted between platforms. If you define a shortcut as "Cmd-B", on PC that shortcut will be changed to "Ctrl-B". Conversely, a shortcut defined as "Ctrl-B" will become "Cmd-B" for Mac users.

The list of actions that can be bound is the same as the list of built-in actions available for toolbar buttons.

Height

To change the minimum height (before it starts auto-growing):

.CodeMirror, .CodeMirror-scroll {
	min-height: 200px;
}

Or, you can keep the height static:

.CodeMirror {
	height: 300px;
}

Event handling

You can catch the following list of events: https://codemirror.net/doc/manual.html#events

var simplemde = new SimpleMDE();
simplemde.codemirror.on("change", function(){
	console.log(simplemde.value());
});

Removing SimpleMDE from textarea

You can revert to the initial textarea by calling the toTextArea method. Note that this clears up the autosave (if enabled) associated with it. The textarea will retain any text from the destroyed SimpleMDE instance.

var simplemde = new SimpleMDE();
...
simplemde.toTextArea();
simplemde = null;

Useful methods

The following self-explanatory methods may be of use while developing with SimpleMDE.

var simplemde = new SimpleMDE();
simplemde.isPreviewActive(); // returns boolean
simplemde.isSideBySideActive(); // returns boolean
simplemde.isFullscreenActive(); // returns boolean
simplemde.clearAutosavedValue(); // no returned value

How it works

SimpleMDE began as an improvement of lepture's Editor project, but has now taken on an identity of its own. It is bundled with CodeMirror and depends on Font Awesome.

CodeMirror is the backbone of the project and parses much of the Markdown syntax as it's being written. This allows us to add styles to the Markdown that's being written. Additionally, a toolbar and status bar have been added to the top and bottom, respectively. Previews are rendered by Marked using GFM.

Comments
  • Side by side preview

    Side by side preview

    Again thank you Wes, great lib. Here is my approach of the only thing missing heh... (actually 3).

    https://jsfiddle.net/xb0rbkvk/9 A split button goes to fullscreen where left is editor, right is preview. 50/50. Preview is live updated and scrolls are synced (roll code, preview rolls too).

    Not creating a PR to consult you first, JS ain't my forte. And... I (and my editor) share massive OCD, so I removed all blanks and changed tabs by spaces. Also added strike through (github markdown but marked supported) and tables.

    new feature idea 
    opened by nofxx 54
  • CodeMirror not defined

    CodeMirror not defined

    I just upgraded from version 1.10.1 to 1.11.0, and the exact same setup I had before now throws the error...

    CodeMirror is not defined

    anywhere that SimpleMDE tries to use CodeMirror. Reverting back to 1.10.1 resolves the problem. I'm really not sure where the error could be; my gulpfile just copies node_modules/simplemde/dist/simplemde.min.js to the requisite scripts directory in my application. It's worked great up until 1.11.0.

    bug 
    opened by ciel 37
  • Editor does not show content on init

    Editor does not show content on init

    My text area is populated with data via php..

    <textarea id="submission_content" maxlength="5000" name="content" placeholder="Content goes here" required>{{ $submission->content }}</textarea>

    I init the editor like this..

    var submissionContent = new SimpleMDE({ element: $("#submission_content")[0], hideIcons: ["image", "heading"], spellChecker: false, placeholder: "10 to 5000 characters" })

    When the page loads the editor looks empty of content. However, when you focus into the editor the content appears.

    bug 
    opened by retzion 17
  • SimpleMDE ain't compatible with NPM3

    SimpleMDE ain't compatible with NPM3

    Hi,

    I've upgraded npm to the version 3 yesterday, and discovered that the package ain't compatible with that version.

    With npm3, all packages and their dependencies are installed in the root node_modules/ folder, so the following lines makes me unable to build the package :

    https://github.com/NextStepWebs/simplemde-markdown-editor/blob/1.8.0/package.json#L49-L51

    I'm sorry i can't help more by making a pull request, i have just no clue about how to fix this.

    question 
    opened by JulienTant 17
  • Icons disappearing?

    Icons disappearing?

    You mention this in your readme:

    // Customize only the order of existing buttons
    var simplemde = new SimpleMDE({
        toolbar: ["bold", "italic", "heading", "|", "quote"],
    });
    

    When I do this, my icons and tooltips disappear. Is this intentional, or bug? Example Screencast

    For the record, here's my exact code:

    var simplemde = new SimpleMDE({
        element: document.getElementById("#description"),
        tabSize: 4,
        toolbar: ["bold", "italic", "heading", "|", "quote"],
    });
    simplemde.render();
    
    bug 
    opened by jesseleite 14
  • Is there any API to get an instance of SimpleMDE?

    Is there any API to get an instance of SimpleMDE?

    Apologies if this is not the right place to ask this question...

    My use case is pretty simple. I have one textarea on my page, on pageload I create a new instance of SimpleMDE (new SimpleMDE({element: $('#markdown-editor')[0]});).

    In my integration test I'd like to programmatically set the contents of the SimpleMDE. Is there a way to retrieve the instance of SimpleMDE that is already on the page? Maybe something like var simplemde = SimpleMDE.get({element: $('#markdown-editor')[0]});

    question 
    opened by kdeggelman 13
  • Cursor can be misplaced in some line wrapping situations

    Cursor can be misplaced in some line wrapping situations

    https://jsfiddle.net/zjxnwroL/8/

    1. Place cursor in the end of the first list item (i.e. after "indexation")
    2. Type one character (e.g. "q")
    3. Remove it (backspace)
    4. Move cursor down one line using keyboard and type something

    Note, after (3) cursor is already in wrong position, but if you proceed typing/deleting it will fix itself. Seems like (4) messes it up completely

    Plain CodeMirror does not have this kind of bug https://jsfiddle.net/o335vwsw/6/

    I've tried to compress CodeMirror to include 'gfm' mode and create a jsfiddle with it, but it does not work for me (see console output here)

    It might be a problem related to gfm mode, but I'm not sure.

    bug 
    opened by jetmind 13
  • simplemde does not work correctly in bootstrap modal

    simplemde does not work correctly in bootstrap modal

    I need simplemde to work with bootstrap modal, currently there are some problems with that.

    I'll describe them here:

    First problem is when I initialize the editor in the bootstrap popup it does not show the text

    SimpleMDE

    only when I click inside the editor does it display the text

    SimpleMDE

    Second problem is when I toogle to side by side view, add some content in the editor, in this case I added lots of content, and when I exit side by side mode not all content is visible in the editor, in this case last line visible is: ## some content here, bla bla bla 9

    as you can see it's not possible to scroll down beneath the line bla bla bla 9 even if there is more content there

    Third problem is with css, when I am in side by side mode I would like it to be responsive, and it's only responsive horizontally right now, since I've had to use px to set the height, it will for whateve reason not work with % which would make it responsive vertically as well

    Fourth problem is the highlighting of some words, I am not sure why it's doing this, there is spellcheck feature but I have it set to false when I initialize the editor. I would like to remove the highlighting of words, it's distracting.

    Also worth mentioning the editor works just fine if it is not used inside bootstrap modal scroll works and all content is scrollable when comming back from side by side mode and inserting lots of text.

    With some more research I've discovered if I set content tab as active instead of basic tab being active first then the content in the markdown editor will be directly visible, if basic tab is active and I have to switch to content tab my self then the content is not visible until I click inside the editor.

    If anyone can fix these errors I am willing to pay for it.

    I've created a demo of this here: https://www.sendspace.com/file/ejdoh6

    opened by nikocraft 12
  • Boolean option to forget autosave on submit + function to forget saved text

    Boolean option to forget autosave on submit + function to forget saved text

    Why is it necessary to set a unique_id to use autosave? (i get the message "SimpleMDE: You must set a unique_id to use the autosave feature"). Why doesn't it just save to the textarea element with which it's initialized as a default?

    enhancement 
    opened by wstoettinger 12
  • How to access the generated HTML?

    How to access the generated HTML?

    In the previews the markdown is already converted to html - how to access that generated html as string?

    The value() method is returning the original markdown string. Since the editor is already generating the html for preview, exposing that generated string (or the generator method) would be helpful (instead of user explicitly trying to do the conversion again from the value() returns)

    question 
    opened by KrishnaPG 11
  • Issues implementing the editor in a Twitter Bootstrap based page

    Issues implementing the editor in a Twitter Bootstrap based page

    Hello.

    I have the current code where I would like to have the editor active:

             <div class="row">
                    <div class="col-md-12">
    
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea id="description" name="description" class="form-control" rows="8"></textarea>
                        </div>
    
    
                    </div>
    
                </div>
                <script>
                    var simplemde = new SimpleMDE();
                </script>
    

    The editor gets instantiated, but this is what I'm seeing:

    Image

    There's no cursor, and when I click it and start writing, this is the result:

    Second image

    The console gives no errors or anything.

    Has anyone had a similar issue and fixed this somehow?

    opened by Repox 10
  • Edit image src on Preview mode

    Edit image src on Preview mode

    i need to change the src of image when user want to preview rendered html:

    -----Editing Mode-----

    ![](image.png)

    -----Preview Mode-----

    <img src="/path/to/image.png" alt="">

    opened by IsmailBourbie 0
  • Is this the right Homepage for this package?

    Is this the right Homepage for this package?

    https://github.com/sparksuite/simplemde-markdown-editor/blob/6abda7ab68cc20f4aca870eb243747951b90ab04/package.json#L12

    It leads to a very empty repo with an issue that points here in sparksuite

    opened by TildeWill 0
  • How do I render the headings inside a div?

    How do I render the headings inside a div?

    So let's say you have this;

    <div> # Hello World </div>

    It will not render the # Hello World inside the div and make it big on the editor. Is there a way to enable this behavior?

    opened by BloomAutist47 0
  • I am using simplemde editor and convert it into html but the value of simplemde.value() is null

    I am using simplemde editor and convert it into html but the value of simplemde.value() is null

    I am using simplemde for markdown editor but when I am converting the value into HTML by simplemde.value() it will return null value.

    var simplemde = new SimpleMDE({element: document.getElementById("MyAnswer")}); document.getElementById("answercontent").value = simplemdesimplemde.options.previewRender(simplemde.value());

    opened by itsayushyadav 0
  • Can't hide and toggle fullscreen or side-by-side

    Can't hide and toggle fullscreen or side-by-side

    Hello, I want to hide fullscreen and side-by-side buttons and set default values to fullscreen enabled with side-by-side enabled. My code:

    var simplemde = new SimpleMDE({
                element: document.getElementById("editor"),
                autofocus: true,
                hideIcons: ["guide", "preview", "fullscreen", "side-by-side"]}, );
            simplemde.toggleFullScreen()
            simplemde.toggleSideBySide()
    

    But, when I check website source code the

    is empty... Snímek obrazovky 2022-02-20 v 20 20 57

    Is there any options how to hide buttons for fullscreen and side-by-side while having them enabled ?

    opened by AbigailF 0
  • is this project still maintained?  (or 5-years abandoned?)

    is this project still maintained? (or 5-years abandoned?)

    am starting a new project in 2022, in the phase looking for an open source rich editor with markdown syntax, hopefully in well maintained, some search lead to here, but does this contributor graph looks more like 5-years abandoned? with 250 open issues

    image

    Thanks,

    opened by t829702 2
Releases(1.11.2)
  • 1.11.2(Jun 14, 2016)

  • 1.11.1(Jun 9, 2016)

  • 1.11.0(Jun 8, 2016)

    Improved

    • Selected text now has the CodeMirror-selectedtext class added (#289)
    • Word count now supports Cyrillic words (#351)
    • Travis CI now tests against Node.js 6 (dbb1c258430779c56fd94e326f2c3b3800655baa)
    • Clean up build process & use new CodeMirror Spell Checker structure (c8f23a3aa9fd6d240ee00253de02b2019ce47e32)

    Fixed

    • Remove stray console.log() code (#280)
    • Fix .toTextArea() sometimes failing (#286)
    • Prevent onclick event from bubbling (#345)
    • Fix incorrect main files for bower.json (#326)
    • Fix selection bug when toggling between side-by-side (#309)
    • Fix CodeMirror bug with init text (#344)
    • Fix line and word count on init (#299)
    • Tweak README
    Source code(tar.gz)
    Source code(zip)
  • 1.10.1(Mar 15, 2016)

    New

    • Optional prompts for inserting links and images
    • Allow destroying SimpleMDE instance
    • Added forceSync option to keep textarea up-to-date with SimpleMDE content

    Improved

    • Tweak wording of README
    • Context aware code button (basically, it's smarter)
    • Use SSL URLs when possible, and use SimpleMDE.com
    • Update dependencies

    Fixed

    • Fix togglePreview not working sometimes (#196)
    • Fix single line breaks bug
    • Hide trailing separators respects hidden icons
    • Fix localStorage detection for iOS private browsing
    • Fix incorrect linting failure messages
    Source code(tar.gz)
    Source code(zip)
  • 1.10.0(Jan 22, 2016)

    New

    • Fully customizable keyboard shortcuts
    • Support for custom status bar items
    • Placeholder option
    • Undo/redo toolbar icons
    • Clean block icon

    Improved

    • Added character counter to status bar
    • Public getter for getState()

    Fixed

    • Now correctly highlights active buttons for headers, images, and links
    • No longer registers duplicate update listeners for side by side mode
    • Fix new table spacing
    • Fix options undefined bug when clearing autosave value
    • Fixed separator display/hide logic
    Source code(tar.gz)
    Source code(zip)
  • 1.9.0(Dec 5, 2015)

    New

    • New function to clear autosaved value
    • Icon for tables introduced
    • Now you can customize the bold/italic markup using the new blockStyles option
    • New showIcons setting for showing specific icons without customizing the full toolbar (like the existing hideIcons setting)

    Improved

    • Depend on specific marked version
    • Autosave now checks that localStorage is available for all features (logs error if not)
    • Prefixed all localStorage keys with smde_ to prevent collisions
    • Clearer documentation for creating custom icons in the toolbar
    • Travis CI now tests in more Node.js versions
    • Update dependencies

    Fixed

    • Fixed autosave briefly losing value
    • Changed unique_id to camel case uniqueId
    • Fixed scrollbar issues caused by inconsistent z-index values
    • Fixed situations where escape key wouldn't work
    • Icons no longer have a tab index in forms
    • Fixed issue where the initial value would overwrite the loaded autosaved value
    • Fixed autosave conditional
    Source code(tar.gz)
    Source code(zip)
  • 1.8.1(Nov 3, 2015)

    New

    • insertTexts, a new option to customize the inserted text for links, images, and horizontal rules

    Improved

    • Now makes HTML syntax colorful while editing
    • Improved gulp build process
    • Updated dependencies

    Fixed

    • Fixed a bug with sprockets compilation related to the CSS
    • Fixed gradient CSS bug
    • Fixed README inaccuracy
    Source code(tar.gz)
    Source code(zip)
  • 1.8.0(Oct 20, 2015)

    New

    • UMD JavaScript module design
    • Bower support

    Improved

    • Lint JavaScript code
    • Updated CodeMirror
    • Add three state methods
      • isPreviewActive()
      • isSideBySideActive()
      • isFullscreenActive()

    Fixed

    • Disable fullscreen dependent features on mobile
    • Prevent dropping binary files
    • Fixed issue where preview would overlap fullscreen of another editor
    • Fixed typos in README
    Source code(tar.gz)
    Source code(zip)
  • 1.7.4(Sep 26, 2015)

  • 1.7.3(Sep 25, 2015)

  • 1.7.2(Sep 25, 2015)

    New

    • Intelligently download Font Awesome
    • New option: hideIcons
    • New option: renderingConfig (includes new option for code syntax highlighting)
      • Compatibility issue: The old option singleLineBreaks has been moved here!

    Improved

    • Tweak the README
    • Dedicated CSS class for not disabling icons during preview (no-disable)
    • Dedicated CSS class for hiding icons on mobile (no-mobile)

    Fixed

    • Fixed URL matching RegEx
    • Hide fullscreen icon on mobile (too many issues)
    Source code(tar.gz)
    Source code(zip)
  • 1.7.1(Sep 17, 2015)

    New

    • New option for custom preview rendering (supports both synchronous and asynchronous)
    • New option for controlling how Markdown is parsed during editing

    Improved

    • Numerous README improvements
    • gulp.js now downloads the latest dependencies during the build process

    Fixed

    • Fix icons being active during preview
    • Fix toolbar height bug in fullscreen mode
    • Add missing icon active state designation when cursor is inside a code block
    • Fix Esc key not exiting full screen properly
    • Fix autosave overwriting default content with empty string
    • Inserting an image or link with no selection will now result in the correct cursor placement
    • Toggling off bold or italic with no selection will also result in the correct cursor placement
    • Prevent some error messages that may occur (see #91)
    Source code(tar.gz)
    Source code(zip)
  • 1.7.0(Sep 2, 2015)

    New

    • Brand new side-by-side preview mode
    • Four new built-in icons
      • Heading 1
      • Heading 2
      • Heading 3
      • Strikethrough

    Improved

    • Single line breaks are now allowed, in compliance with GFM (option to disable)
    • Gulp now beautifies the JS and CSS files
    • Improved heading bigger/smaller icon design
    • Fade edges of fullscreen toolbar to indicate scroll on mobile

    Fixed

    • If element option is specified and no element is found, SimpleMDE with throw an error
    • Fix toolbar button shift issue
    • Fix issue with heading bigger adding an extra space
    • Prevent scrolling the page behind fullscreen mode on mobile
    Source code(tar.gz)
    Source code(zip)
  • 1.6.1(Aug 28, 2015)

  • 1.6.0(Aug 28, 2015)

    New

    • New icons: Heading, Heading Bigger, Heading Smaller
    • New option for easy showing, hiding, and reordering of the built-in toolbar buttons

    Improved

    • Enhanced the performance and visual appearance of fullscreen (including mobile friendliness and some small bugs)
    • Improved numerous areas of the README
    • Updated CodeMirror to 5.6

    Fixed

    • Fixed bloated memory consumption issue (updated to CodeMirror Spell Checker 1.0.5)
    • Changed gulp dependencies to devDependencies
    Source code(tar.gz)
    Source code(zip)
  • 1.5.1(Aug 11, 2015)

    Improved

    • Restructure repository files and use gulp.js
    • Allow value function to set blank value
    • Allow initial value to be set via options

    Fixed

    • Fix bug where toolbar wouldn't be disabled when previewing if there were multiple editors present
    • Fix bug where fullscreen wouldn't work when multiple editors were present
    Source code(tar.gz)
    Source code(zip)
  • 1.5.0(Aug 8, 2015)

    New

    • Fullscreen mode. Available via a new default toolbar icon and the shortcut key F11.

    Improved

    • Update marked.js to 0.3.5
    • Update CodeMirror to latest commits
    • Update CodeMirror Spell Checker to 1.0.4
    • Made the Markdown Guide responsive
    • Tweaked README

    Fixed

    • Fix bug where cursor position could be off in a variety of situations
    • Fix toolbar variable being overwritten
    Source code(tar.gz)
    Source code(zip)
  • 1.4.0(Jul 21, 2015)

    New

    • Spell checking (with option to disable). Highlights all misspelled words in light red.

    Improved

    • Update to CodeMirror 5.5.1

    Fixed

    • More reliable tabbing, especially with Firefox
    Source code(tar.gz)
    Source code(zip)
  • 1.3.1(Jul 14, 2015)

    Improved

    • Use GitHub Flavored Markdown for CodeMirror, to match the marked.js rendering, and to improve other aspects of Markdown composition.
    Source code(tar.gz)
    Source code(zip)
  • 1.3.0(Jul 14, 2015)

    New

    • Markdown guide icon, which links to a new guide
    • New icon: code block
    • New icon: horizontal rule

    Improved

    • Tooltips for every icon that include their keyboard shortcut
    • Option to disable tooltips
    • Option to disable markdown guide icon
    • Keyboard shortcut for previewing
    • Ability to completely customize the toolbar icons
    • Improved formatting of README

    Fixed

    • Selection issue with CSS and code
    Source code(tar.gz)
    Source code(zip)
  • 1.2.1(Jun 27, 2015)

  • 1.2.0(Jun 26, 2015)

    New

    • Auto Saving
    • Customize the options (see documentation)

    Improved

    • Make tables clearer in preview
    • Split Font Awesome out (in case you already use it)
    • Remove "Short description of image" when adding image
    • Make README more readable and organized
    • Large improvement to tabbing
      • Tabbing list items now works
      • Shift-tabbing list items now works
      • Tabs respect indent with tabs vs. spaces
      • Tabs respect tab size
    • Update to CodeMirror 5.4.1
    • Update to Marked 0.3.3

    Fixed

    • Fixed toolbar not hiding
    • Fixed inconsistencies with documentation
    • Fixed line wrapping issues
    • Fixed variable types
    • Fixed README color coding
    Source code(tar.gz)
    Source code(zip)
  • 1.1.6(Jun 23, 2015)

  • 1.1.5(Jun 23, 2015)

  • 1.1.4(Jun 23, 2015)

  • 1.1.3(Jun 22, 2015)

  • 1.1.2(Jun 22, 2015)

  • 1.1.1(Jun 22, 2015)

  • 1.1.0(Jun 22, 2015)

  • 1.0.0(Jun 22, 2015)

Owner
Sparksuite
Building software companies and meaningful open source projects
Sparksuite
A markdown editor. http://lab.lepture.com/editor/

Editor A markdown editor you really want. Sponsors Editor is sponsored by Typlog. Overview Editor is not a WYSIWYG editor, it is a plain text markdown

Hsiaoming Yang 2.8k Dec 19, 2022
enjoy live editing (+markdown)

Pen Editor LIVE DEMO: http://sofish.github.io/pen Markdown is supported Build status: 0. source code You can clone the source code from github, or usi

小鱼 4.8k Dec 24, 2022
A chrome extension which helps change ace editor to monaco editor in web pages, supporting all features including autocompletes.

Monaco-It Monaco-It is a chrome extension turning Ace Editor into Monaco Editor, supporting all features including autocompletes. 一些中文说明 Supported Lan

null 3 May 17, 2022
Simple, beautiful wysiwyg editor

This repo is no longer maintained. bootstrap3-wysiwyg is much better Overview Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create

James Hollingworth 4.2k Dec 30, 2022
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

TinyMCE TinyMCE is the world's most advanced open source core rich text editor. Trusted by millions of developers, and used by some of the world's lar

Tiny 12.4k Jan 4, 2023
:notebook: Our cool, secure, and offline-first Markdown editor.

Monod Hi! I'm Monod, the Markdown Editor! Monod is a (relatively) secure and offline-first Markdown editor we have built at TailorDev in order to lear

TailorDev 877 Dec 4, 2022
A markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

updated: Saturday, 5th February 2022 A modern looking application built with Electron-Vite-React ?? ✨ Markdown Editor Introduction This application s

Kryptonite 5 Sep 7, 2022
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

TOAST UI Editor v3 major update planning ?? ?? ?? TOAST UI Editor is planning a v3 major update for 2021. You can see our detail RoadMap here! GFM Mar

NHN 15.5k Jan 3, 2023
In-browser Markdown editor

StackEdit Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites

Benoit Schweblin 19.9k Jan 9, 2023
A editor with the main features created using Remirror and with a special code block

A editor with the main features created using Remirror and with a special code block

Brenda Profiro 26 Sep 20, 2022
The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.

CKEditor 4 - Smart WYSIWYG HTML editor A highly configurable WYSIWYG HTML editor with hundreds of features, from creating rich text content with capti

CKEditor Ecosystem 5.7k Dec 27, 2022
Override the rich text editor in Strapi admin with ToastUI Editor.

strapi-plugin-wysiwyg-tui-editor ⚠️ This is a strapi v4 plugin which does not support any earlier version! A Strapi plugin to replace the default rich

Zhuo Chen 12 Dec 23, 2022
Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in.

Typewriter Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in. Features S

Isla 2 May 24, 2022
Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co

Quill 34.3k Jan 2, 2023
Notitap - Notion like editor built on top of tiptap.

notitap Notion like editor built on top of Tiptap. Discord - sereneinserenade#4869 A ⭐️ to the repo if you ?? / ❤️ what I'm doing would be much apprec

Jeet Mandaliya 103 Jan 4, 2023
A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Raphael Cruzeiro 1.7k Dec 12, 2022
Simple rich text editor (contentEditable) for jQuery UI

Hallo - contentEditable for jQuery UI Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable

Henri Bergius 2.4k Dec 17, 2022
Super simple WYSIWYG editor

Summernote Super simple WYSIWYG Editor. Summernote Summernote is a JavaScript library that helps you create WYSIWYG editors online. Home page: https:/

Summernote 11k Jan 7, 2023
Customize your README.md file with ready-to-use sections in a simple way with the web editor

myreadme Customize your README.md file with ready-to-use sections in a simple way with the web editor Docker version Docker Hub docker run -p 7000:300

Nelson Hernández 7 Jul 25, 2022