Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/laobubu/MarkdownIME

A fresh way to write well-formatted text, by typing markdownized stuff on web.
https://github.com/laobubu/MarkdownIME

Last synced: about 1 month ago
JSON representation

A fresh way to write well-formatted text, by typing markdownized stuff on web.

Host: GitHub
URL: https://github.com/laobubu/MarkdownIME
Owner: laobubu
License: other
Created: 2015-12-07T15:02:24.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2018-09-22T07:04:00.000Z (about 6 years ago)
Last Synced: 2024-10-29T20:10:43.956Z (about 1 month ago)
Language: TypeScript
Homepage: https://laobubu.net/MarkdownIME/
Size: 590 KB
Stars: 469
Watchers: 24
Forks: 54
Open Issues: 5
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

project-awesome - laobubu/MarkdownIME - A fresh way to write well-formatted text, by typing markdownized stuff on web. (TypeScript)

README

        # 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](https://laobubu.github.io/MarkdownIME/). Works like a charm on desktop and mobile!

[![Build Status](https://travis-ci.org/laobubu/MarkdownIME.svg?branch=master)](https://travis-ci.org/laobubu/MarkdownIME)

[![npm](https://img.shields.io/npm/v/markdown-ime.svg)](https://www.npmjs.com/package/markdown-ime)

![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/markdown-ime.svg)

![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/markdown-ime.svg)

![](https://laobubu.github.io/MarkdownIME/demo.gif?cache3)

## Quickstart / Guide

[Make a simpliest editor](https://codepen.io/laobubu/pen/ZQqEQo):

1. Include MarkdownIME

   - Via NPM: `const MarkdownIME = require("markdown-ime")`

   - or, via Script Tag: ``

2. Insert an HTML tag: `
Hello World`

3. Activate MarkdownIME in one JavaScript: `MarkdownIME.Enhance(MarkdownIME.Scan(window));`

Using other editor like **TinyMCE** / **Quill**? Please follow [the examples](./examples).

More info can be found in [examples](./examples) and [manual](https://laobubu.github.io/MarkdownIME/manual.html)

## 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](https://github.com/laobubu/hypermd/) is what you need!

### Supported Editor

- **Vanilla _contenteditable_ elements** - a `div[contentEditable]` makes everything.

- Other rich-text editor based on `contentEditable`

  - [TinyMCE](https://www.tinymce.com/), [Quill](https://quilljs.com/), [WangEditor](http://www.wangeditor.com/) and more, see [examples](./examples)

### Supported Shorkeys

Full list can be found [here](src/extra/shortkeys.ts).

| 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](http://laobubu.net)

- ***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)