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

Include MarkdownIME
- Via NPM: const MarkdownIME = require("markdown-ime")
- or, via Script Tag: <script src="https://build.laobubu.net/MarkdownIME/MarkdownIME.js"></script>
Insert an HTML tag: <div contentEditable id="editor"><p>Hello World</p></div>
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

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!

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

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

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.