开源软件名称(OpenSource Name):laobubu/MarkdownIME
开源软件地址(OpenSource Url):https://github.com/laobubu/MarkdownIME
开源编程语言(OpenSource Language):
TypeScript
78.3%
开源软件介绍(OpenSource Introduction):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:
- 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
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)
|
请发表评论