Skip to content
A fresh way to write well-formatted text, by typing markdownized stuff on web.
TypeScript JavaScript HTML Shell
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
scripts
src
test
.gitignore
.travis.yml
LICENSE
MarkdownIME.d.ts
README.md
package.json
tsconfig.json
webpack.config.js

README.md

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!

Build Status npm npm bundle size (minified) npm bundle size (minified + gzip)

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

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)
You can’t perform that action at this time.