Top Related Projects
The last Markdown editor, ever.
In-browser Markdown editor
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
A markdown editor. http://lab.lepture.com/editor/
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
A completely customizable framework for building rich text editors. (Currently in beta.)
Quick Overview
Editor.md is an open-source online Markdown editor with a rich set of features. It provides a user-friendly interface for writing and previewing Markdown content, along with various plugins and extensions to enhance the editing experience.
Pros
- Extensive feature set, including syntax highlighting, code folding, and preview modes
- Supports various Markdown extensions and plugins
- Customizable and easy to integrate into existing projects
- Active development and community support
Cons
- Large file size due to numerous features and dependencies
- May have a steeper learning curve for users unfamiliar with advanced Markdown features
- Some users report occasional performance issues with large documents
Code Examples
- Basic initialization:
var editor = editormd("editor", {
width: "100%",
height: 640,
path : "editor.md/lib/"
});
- Customizing toolbar items:
var editor = editormd("editor", {
toolbarIcons : function() {
return ["undo", "redo", "|", "bold", "italic", "quote", "list-ul", "list-ol"]
}
});
- Enabling specific plugins:
var editor = editormd("editor", {
pluginPath : "editor.md/plugins/",
emoji : true,
taskList : true,
tex : true,
flowChart : true,
sequenceDiagram : true
});
Getting Started
To use Editor.md in your project, follow these steps:
- Include the necessary CSS and JavaScript files:
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
- Create a container element for the editor:
<div id="editor">
<!-- Initial content -->
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
- Initialize the editor:
<script type="text/javascript">
$(function() {
var editor = editormd("editor", {
width: "100%",
height: 640,
path : "editor.md/lib/"
});
});
</script>
This will create a basic Editor.md instance with default settings. You can customize the editor further by adjusting the configuration options as needed.
Competitor Comparisons
The last Markdown editor, ever.
Pros of Dillinger
- Online-first approach with a web-based interface
- Supports multiple cloud storage services (Dropbox, Google Drive, etc.)
- Real-time preview and export to various formats (HTML, PDF)
Cons of Dillinger
- Less customizable compared to Editor.md
- Fewer built-in markdown extensions and plugins
- Requires internet connection for full functionality
Code Comparison
Editor.md:
var editor = editormd("editor", {
width: "100%",
height: 640,
path : "../lib/",
theme : "dark",
previewTheme : "dark",
editorTheme : "pastel-on-dark",
markdown : "# Hello World",
codeFold : true,
});
Dillinger:
const dillinger = new Dillinger({
el: '#editor',
theme: 'ace/theme/monokai',
mode: 'ace/mode/markdown',
value: '# Hello World',
onChange: (value) => {
// Handle changes
}
});
Both repositories offer Markdown editors, but they cater to different use cases. Editor.md is more feature-rich and customizable, ideal for integration into existing projects. Dillinger provides a simpler, web-based solution with cloud storage integration, making it more suitable for users who prefer an online editing experience without local setup.
In-browser Markdown editor
Pros of StackEdit
- Full-featured web-based Markdown editor with live preview
- Supports cloud synchronization (Google Drive, Dropbox)
- Offers offline editing capabilities
Cons of StackEdit
- Heavier and more complex than editor.md
- May have a steeper learning curve for new users
Code Comparison
StackEdit (JavaScript):
const converter = new showdown.Converter();
const html = converter.makeHtml(markdown);
editor.md (JavaScript):
var editor = editormd("editor", {
width: "100%",
height: "100%",
markdown: "# Hello world!"
});
Key Differences
- StackEdit is a full-fledged web application, while editor.md is a lightweight editor component
- StackEdit offers more advanced features like cloud sync, while editor.md focuses on simplicity
- editor.md provides easier integration into existing projects, whereas StackEdit is better suited as a standalone application
Use Cases
- Choose StackEdit for a comprehensive Markdown editing experience with cloud integration
- Opt for editor.md when you need a simple, embeddable Markdown editor for your web application
Both projects serve different needs in the Markdown editing ecosystem, with StackEdit offering a more robust feature set and editor.md providing a lightweight, easily integrable solution.
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
Pros of SimpleMDE
- Lightweight and easy to integrate
- Better mobile support and responsiveness
- More active development and community support
Cons of SimpleMDE
- Fewer built-in features compared to editor.md
- Less extensive documentation and examples
Code Comparison
SimpleMDE:
var simplemde = new SimpleMDE({
element: document.getElementById("MyID"),
spellChecker: false,
autosave: {
enabled: true,
unique_id: "MyUniqueID"
}
});
editor.md:
var editor = editormd("editor", {
width: "100%",
height: 640,
path : "../lib/",
toolbarIcons : function() {
return ["bold", "italic", "hr", "|", "preview", "watch", "|", "fullscreen", "info"]
}
});
Both editors offer simple integration, but SimpleMDE's setup is more concise. editor.md provides more customization options out of the box, such as toolbar configuration. SimpleMDE focuses on core functionality, while editor.md includes a wider range of features in its default configuration.
SimpleMDE is generally easier to set up and use, making it a good choice for projects that need a straightforward Markdown editor. editor.md, on the other hand, offers more advanced features and customization options, which may be beneficial for projects requiring a more feature-rich editing experience.
A markdown editor. http://lab.lepture.com/editor/
Pros of Editor
- Lightweight and minimalist design, focusing on core editing functionality
- Better suited for integration into existing projects or custom implementations
- More actively maintained with recent updates and contributions
Cons of Editor
- Fewer built-in features and plugins compared to Editor.md
- Less extensive documentation and examples available
- Smaller community and fewer third-party extensions
Code Comparison
Editor.md:
var editor = editormd("editor", {
width: "100%",
height: 640,
path : "../lib/",
theme : "dark",
previewTheme : "dark",
editorTheme : "pastel-on-dark",
markdown : "# Hello world!",
codeFold : true,
});
Editor:
var editor = new Editor({
element: document.getElementById('editor'),
status: ['lines', 'words', 'cursor'],
toolbar: ['bold', 'italic', 'quote', 'unordered-list', 'ordered-list']
});
editor.render();
The code snippets demonstrate the initialization process for both editors. Editor.md offers more configuration options out of the box, while Editor provides a simpler setup with fewer initial customizations. Editor.md includes theme settings and markdown content in the initialization, whereas Editor focuses on basic toolbar and status bar options.
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
Pros of TOAST UI Editor
- More active development with frequent updates and bug fixes
- Extensive documentation and examples for easier implementation
- Supports both Markdown and WYSIWYG editing modes
Cons of TOAST UI Editor
- Larger file size and potentially heavier resource usage
- Steeper learning curve due to more complex API and configuration options
Code Comparison
TOAST UI Editor initialization:
const editor = new Editor({
el: document.querySelector('#editor'),
height: '500px',
initialEditType: 'markdown',
previewStyle: 'vertical'
});
Editor.md initialization:
var editor = editormd("editor", {
width: "100%",
height: 640,
path : "../lib/"
});
Additional Considerations
- Editor.md is lightweight and focuses solely on Markdown editing
- TOAST UI Editor offers more customization options and plugins
- Editor.md has a simpler API, making it easier to set up for basic use cases
- TOAST UI Editor provides better cross-browser compatibility and mobile support
- Editor.md includes built-in emoji support, while TOAST UI Editor requires a separate plugin
Both editors are open-source and free to use, but TOAST UI Editor is backed by a company (NHN), which may provide more long-term stability and support.
A completely customizable framework for building rich text editors. (Currently in beta.)
Pros of Slate
- More flexible and customizable, allowing for complex rich-text editing experiences
- Better suited for building modern, interactive web applications
- Actively maintained with frequent updates and a larger community
Cons of Slate
- Steeper learning curve due to its framework-agnostic nature
- Requires more setup and configuration compared to Editor.md
- May be overkill for simple markdown editing tasks
Code Comparison
Slate (React example):
import { Editor } from 'slate-react'
const MyEditor = () => (
<Editor
value={initialValue}
onChange={value => setValue(value)}
/>
)
Editor.md:
<div id="editor">
<!-- Editor will be rendered here -->
</div>
<script>
var editor = editormd("editor", {
// options
});
</script>
Summary
Slate is a more powerful and flexible rich-text editor framework, ideal for complex web applications. It offers greater customization but requires more setup and learning. Editor.md is simpler to implement and focused on Markdown editing, making it a good choice for straightforward markdown tasks. The choice between the two depends on the specific project requirements and the level of customization needed.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Editor.md
Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.
Features
- Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);
- Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting...;
- Markdown Extras : Support ToC (Table of Contents), Emoji, Task lists, @Links...;
- Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;
- Support decode & fliter of the HTML tags & attributes;
- Support TeX (LaTeX expressions, Based on KaTeX), Flowchart and Sequence Diagram of Markdown extended syntax;
- Support AMD/CMD (Require.js & Sea.js) Module Loader, and Custom/define editor plugins;
Editor.md æ¯ä¸æ¬¾å¼æºçãå¯åµå ¥ç Markdown å¨çº¿ç¼è¾å¨ï¼ç»ä»¶ï¼ï¼åºäº CodeMirrorãjQuery å Marked æ建ã
主è¦ç¹æ§
- æ¯æéç¨ Markdown / CommonMark å GFM (GitHub Flavored Markdown) é£æ ¼çè¯æ³ï¼ä¹å¯å身为代ç ç¼è¾å¨ï¼
- æ¯æå®æ¶é¢è§ãå¾çï¼è·¨åï¼ä¸ä¼ ãé¢æ ¼å¼ææ¬/代ç /è¡¨æ ¼æå ¥ã代ç æå ã跳转å°è¡ãæç´¢æ¿æ¢ãåªè¯»æ¨¡å¼ãèªå®ä¹æ ·å¼ä¸»é¢åå¤è¯è¨è¯æ³é«äº®çåè½ï¼
- æ¯æ ToCï¼Table of Contentsï¼ãEmoji表æ ãTask listsã@é¾æ¥ç Markdown æ©å±è¯æ³ï¼
- æ¯æ TeX ç§å¦å ¬å¼ï¼åºäº KaTeXï¼ãæµç¨å¾ Flowchart å æ¶åºå¾ Sequence Diagram;
- æ¯æè¯å«å解æ HTML æ ç¾ï¼å¹¶ä¸æ¯æèªå®ä¹è¿æ»¤æ ç¾åå±æ§è§£æï¼å ·æå¯é çå®å ¨æ§åå ä¹æ éçæ©å±æ§ï¼
- æ¯æ AMD / CMD 模ååå è½½ï¼æ¯æ Require.js & Sea.jsï¼ï¼å¹¶ä¸æ¯æèªå®ä¹æ©å±æ件ï¼
- å ¼å®¹ä¸»æµçæµè§å¨ï¼IE8+ï¼å Zepto.jsï¼ä¸æ¯æ iPad çå¹³æ¿è®¾å¤ï¼
Download & install
Download:
NPM install :
npm install editor.md
Bower install :
bower install editor.md
Usages
Create a Markdown editor
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
<!-- Tips: Editor.md can auto append a `<textarea>` tag -->
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editor", {
// width: "100%",
// height: "100%",
// markdown: "xxxx", // dynamic set Markdown text
path : "editor.md/lib/" // Autoload modules mode, codemirror, marked... dependents libs path
});
});
</script>
If you using modular script loader:
Markdown to HTML
<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<div id="test-markdown-view">
<!-- Server-side output Markdown text -->
<textarea style="display:none;">### Hello world!</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editormd/editormd.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script type="text/javascript">
$(function() {
var testView = editormd.markdownToHTML("test-markdown-view", {
// markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
// htmlDecode : true, // Enable / disable HTML tag encode.
// htmlDecode : "style,script,iframe", // Note: If enabled, you should filter some dangerous HTML tags for website security.
});
});
</script>
See the full example: http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html
HTML to Markdown?
Sorry, Editor.md not support HTML to Markdown parsing, Maybe In the future.
Examples
https://pandao.github.io/editor.md/examples/index.html
Options
Editor.md options and default values:
{
mode : "gfm", // gfm or markdown
name : "", // Form element name for post
value : "", // value for CodeMirror, if mode not gfm/markdown
theme : "", // Editor.md self themes, before v1.5.0 is CodeMirror theme, default empty
editorTheme : "default", // Editor area, this is CodeMirror theme at v1.5.0
previewTheme : "", // Preview area theme, default empty
markdown : "", // Markdown source code
appendMarkdown : "", // if in init textarea value not empty, append markdown to textarea
width : "100%",
height : "100%",
path : "./lib/", // Dependents module file directory
pluginPath : "", // If this empty, default use settings.path + "../plugins/"
delay : 300, // Delay parse markdown to html, Uint : ms
autoLoadModules : true, // Automatic load dependent module files
watch : true,
placeholder : "Enjoy Markdown! coding now...",
gotoLine : true, // Enable / disable goto a line
codeFold : false,
autoHeight : false,
autoFocus : true, // Enable / disable auto focus editor left input area
autoCloseTags : true,
searchReplace : true, // Enable / disable (CodeMirror) search and replace function
syncScrolling : true, // options: true | false | "single", default true
readOnly : false, // Enable / disable readonly mode
tabSize : 4,
indentUnit : 4,
lineNumbers : true, // Display editor line numbers
lineWrapping : true,
autoCloseBrackets : true,
showTrailingSpace : true,
matchBrackets : true,
indentWithTabs : true,
styleSelectedText : true,
matchWordHighlight : true, // options: true, false, "onselected"
styleActiveLine : true, // Highlight the current line
dialogLockScreen : true,
dialogShowMask : true,
dialogDraggable : true,
dialogMaskBgColor : "#fff",
dialogMaskOpacity : 0.1,
fontSize : "13px",
saveHTMLToTextarea : false, // If enable, Editor will create a <textarea name="{editor-id}-html-code"> tag save HTML code for form post to server-side.
disabledKeyMaps : [],
onload : function() {},
onresize : function() {},
onchange : function() {},
onwatch : null,
onunwatch : null,
onpreviewing : function() {},
onpreviewed : function() {},
onfullscreen : function() {},
onfullscreenExit : function() {},
onscroll : function() {},
onpreviewscroll : function() {},
imageUpload : false, // Enable/disable upload
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "", // Upload url
crossDomainUpload : false, // Enable/disable Cross-domain upload
uploadCallbackURL : "", // Cross-domain upload callback url
toc : true, // Table of contents
tocm : false, // Using [TOCM], auto create ToC dropdown menu
tocTitle : "", // for ToC dropdown menu button
tocDropdown : false, // Enable/disable Table Of Contents dropdown menu
tocContainer : "", // Custom Table Of Contents Container Selector
tocStartLevel : 1, // Said from H1 to create ToC
htmlDecode : false, // Open the HTML tag identification
pageBreak : true, // Enable parse page break [========]
atLink : true, // for @link
emailLink : true, // for email address auto link
taskList : false, // Enable Github Flavored Markdown task lists
emoji : false, // :emoji: , Support Github emoji, Twitter Emoji (Twemoji);
// Support FontAwesome icon emoji :fa-xxx: > Using fontAwesome icon web fonts;
// Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: > 1~8x;
tex : false, // TeX(LaTeX), based on KaTeX
flowChart : false, // flowChart.js only support IE9+
sequenceDiagram : false, // sequenceDiagram.js only support IE9+
previewCodeHighlight : true, // Enable / disable code highlight of editor preview area
toolbar : true, // show or hide toolbar
toolbarAutoFixed : true, // on window scroll auto fixed position
toolbarIcons : "full", // Toolbar icons mode, options: full, simple, mini, See `editormd.toolbarModes` property.
toolbarTitles : {},
toolbarHandlers : {
ucwords : function() {
return editormd.toolbarHandlers.ucwords;
},
lowercase : function() {
return editormd.toolbarHandlers.lowercase;
}
},
toolbarCustomIcons : { // using html tag create toolbar icon, unused default <a> tag.
lowercase : "<a href=\"javascript:;\" title=\"Lowercase\" unselectable=\"on\"><i class=\"fa\" name=\"lowercase\" style=\"font-size:24px;margin-top: -10px;\">a</i></a>",
"ucwords" : "<a href=\"javascript:;\" title=\"ucwords\" unselectable=\"on\"><i class=\"fa\" name=\"ucwords\" style=\"font-size:20px;margin-top: -3px;\">Aa</i></a>"
},
toolbarIconTexts : {},
lang : { // Language data, you can custom your language.
name : "zh-cn",
description : "å¼æºå¨çº¿Markdownç¼è¾å¨<br/>Open source online Markdown editor.",
tocTitle : "ç®å½",
toolbar : {
//...
},
button: {
//...
},
dialog : {
//...
}
//...
}
}
Dependents
- CodeMirror
- marked
- jQuery
- FontAwesome
- github-markdown.css
- KaTeX
- prettify.js
- Rephael.js
- flowchart.js
- sequence-diagram.js
- Prefixes.scss
Changes
License
The MIT License.
Copyright (c) 2015-2019 Pandao
Top Related Projects
The last Markdown editor, ever.
In-browser Markdown editor
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
A markdown editor. http://lab.lepture.com/editor/
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
A completely customizable framework for building rich text editors. (Currently in beta.)
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot