Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 14 days 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 (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-22T07:04:00.000Z (about 6 years ago)
- Last Synced: 2024-09-19T18:48:52.495Z (about 2 months 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
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!
[](https://travis-ci.org/laobubu/MarkdownIME)
[](https://www.npmjs.com/package/markdown-ime)
## 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)