Code Monkey home page Code Monkey logo

markdownime's 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)

markdownime's People

Contributors

laobubu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

markdownime's Issues

我对您的项目的一点建议

今天早晨从小众软件看到您的项目,我就很感兴趣,并且一直测试到现在。我测试过:

  • 小众软件
  • 豆瓣
  • zhibo8.cc(我觉得这个论坛是discuz的)

但是都不行,唯独在您的帮助主页(就是有演示动画的那个页面)可以。由于我的需求是一个WYSIWYG的md编辑器,所以我就把这个帮助主页下载了下来,试了试我的常用需求,真的很赞,表格输入那里有惊艳的感觉。不过从我的需求来说,我想提几个功能上的建议,我也会努力的学习下代码,争取帮到点忙:

  • 一个开关:在即时渲染和源代码直接输入之间切换。因为有时候格式的渲染还是比较打断码字时的思路
  • 导出md源代码
  • 不同的渲染风格的切换
  • 导出html文件
  • 数学公式不用图片来模拟,或者可以用选项控制,是图片还是MathJax
  • 做成一个Chrome插件,可以离线使用
  • 统一一下退出当前语法的方法,是双击回车?或是其他方法
  • 代码输入高亮

一个小小小问题

摁了TAB之后光标要过一段时间才会消失,不知道是不是故意这样设定的。。。

一个导致浏览器卡死的BUG

在使用MarkdownIME编辑器的过程中,先输入几行文字,然后在新的一行按 ctrl+b 切换到粗体文字模式,输入数字加点号然后空格回车,此时浏览器会卡死,测试环境:最新的chrome和firefox

建议呢

可以不直接用回车,写个什么东西+回车只编译一行也不错的

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.