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 onescripttags. - 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>
- Via NPM:
- 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
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 CodeStrikethrough- 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)