MarkdownIME

MarkdownIME is a fresh and fast way to make text formatted, and a minimal & powerful web rich-text editor.

• MINIMAL: No 3rd-party dependency. No buttons or stylesheets. Only require one div[contentEditable] and one script tags.
• POWERFUL: With Markdown markups and shortkeys, you can typeset your document on-the-fly.

Try out the demo. Works like a charm on desktop and mobile!

Quickstart / Guide

Make a simpliest editor:

1. Include MarkdownIME
   • Via NPM: const MarkdownIME = require("markdown-ime")
   • or, via Script Tag: <script src="https://build.laobubu.net/MarkdownIME/MarkdownIME.js"></script>
2. Insert an HTML tag: <div contentEditable id="editor"><p>Hello World</p></div>
3. Activate MarkdownIME in one JavaScript: MarkdownIME.Enhance(MarkdownIME.Scan(window));

Using other editor like TinyMCE / Quill? Please follow the examples.

More info can be found in examples and manual

Features

Notice

With MarkdownIME, user inputs Markdown, you get HTML Nodes instantly -- all Markdown markups are discarded.

If you want the intact Markdown rather than rendered HTML, maybe HyperMD -- a WYSIWYG Markdown Editor is what you need!

Supported Editor

• Vanilla contenteditable elements - a div[contentEditable] makes everything.
• Other rich-text editor based on contentEditable
  • TinyMCE, Quill, WangEditor and more, see examples

Supported Shorkeys

Full list can be found here.

| Key | Feature | Key | Feature | |-----|---------|-----|---------| | Ctrl + I | Toggle Italic | Ctrl + B | Toggle Bold | | Ctrl + U | Toggle Underline | | Ctrl + Shift + = | superscript | Ctrl + = | subscript | | Ctrl + L | justifyLeft | Ctrl + E | justifyCenter | | Ctrl + R | justifyRight |

| Key | Feature | |-----|---------| | ` | Mark selected text as inline-code |

Shortkeys in Tables

| Key | Feature | Key | Feature | |-----|---------|-----|---------| | Insert | Insert a column after | Shift + Insert | Insert a column before | | Tab | Go next cell, or insert a row | Shift + Tab | Go previous cell | | Up | Go cell above current | Down | Go cell under current |

| Key | Feature | |-----|---------| | Enter | If current row is empty, finish the table. Otherwise, insert a row below. |

Note that some shortkeys might be unavaliable in some browsers; MarkdownIME shortkeys are disabled in TinyMCE by default.

Supported Markdown Markups

Block Elements

• Headers (beginning with # )
• Horizontal ( --- )
• (Nested) Lists
• (Nested) Blockquote
• Code Block

Span Elements

• Links
• Emphasis
• In-line Code
• ~~Strikethrough~~
• Images
• Emojis ( eg. :) or :smile: )

Tables

• Create a table with | table | column | headers | and Enter key
• Use shortkeys to navigate and master the table (see above)