• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

laobubu/MarkdownIME: A fresh way to write well-formatted text, by typing markdow ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(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!

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)



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap