tui.editor: A JavaScript repository from fajarnorman

GFM Markdown Wysiwyg Editor - Productive and Extensible

🚩 Table of Contents

Browser Support
Standard and Extensible
- CommonMark + GFM Specifications
- Powerful Extensions
Features
Install
Usage
- Editor
  - HTML
  - javascript
  - options
- Viewer
Docs
Examples
Contributing
TOAST UI Family
Used By
License

🌏 Browser Support

Internet Explorer	Edge	Firefox	Chrome	Safari
10+	Yes	Yes	Yes	Yes

Standard and Extensible

CommonMark + GFM Specifications

Today CommonMark is the de-facto Markdown standard. GFM (GitHub Flavored Markdown) is another popular specification based on CommonMark - maintained by GitHub, which is known as the biggest Markdown user. TOAST UI Editor respects both CommonMark and GFM specifications. Write documents with ease using productive tools provided by TOAST UI Editor. You can open this document wherever the specifications are supported.

Powerful Extensions

CommonMark and GFM are great, but we often face requirements beyond the specifications. The TOAST UI Editor comes with powerful Extensions in compliance with the Markdown syntax, while also providing APIs so you can develop your own extensions.

Here are some of the extensions you can start with:

Color picker: ColorPicker provides an easy way to color text with a GUI tool box
Chart code block: A Code block marked as a 'chart' will render charts
UML code block: A Code block marked as an 'uml' will render UML diagrams
Table merge: You can merge columns and rows in tables

To learn more about Extensions check the Using Extension

🎨 Features

TOAST UI Editor provides Markdown mode and Wysiwyg mode.

Some may like the productivity of Markdown, while others may be looking for a way to make it easier to edit. The TOAST UI Editor can be the coordinator of both. It offers Markdown mode and Wysiwyg mode, which can be switched at any time during writing content. Both work together conveniently in one document.

Productive Markdown mode

Live Preview: Edit Markdown while keeping eye on the rendered HTML. Your edits will be applied immediately
Scrolling Sync: Synchronous scrolling between Markdown and Preview. You don't need to scroll those separately
Auto indent: The cursor will always be where you want to be
Syntax highlight: You can check broken Markdown syntax immediately

Easy Wysiwig mode

Copy and paste: Paste anything from browser, screenshot, excel, powerpoint etc
Codeblock editor: Highlight 170+ languages with full size code editor
Table: Hate the Markdown table? You can do everything with a mouse

And more

i18n: English, Dutch, Korean, Japanese, Chinese + language you extend.
Viewer: Renders Markdown content with extensions

💾 Install

using npm

npm install --save tui-editor

using bower

bower install --save tui-editor

download

🔨 Usage

Below codes are for npm. If you are using bower please see Getting started with bower.

Editor

HTML

Place a <div></div> where you want TOAST UI Editor rendered.

<body>
...
<div id="editSection"></div>
...
</body>

javascript

Initialize Editor class with given element to make an Editor.

var Editor = require('tui-editor');
...
var editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

or you can use jquery plugin.

$('#editSection').tuiEditor({
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

options

height: Height in string or auto ex) 300px | auto
initialValue: Initial value. Set Markdown string
initialEditType: Initial type to show markdown | wysiwyg
previewType: Preview style of Markdown mode tab | vertical

Find out more options here

Viewer

TOAST UI Editor provides a Viewer in case you want to show Markdown content without loading the editor. The Viewer has much lighter than the editor.

var Viewer = require('tui-editor/dist/tui-editor-Viewer');
...
var editor = new Viewer({
    el: document.querySelector('#viewerSection'),
    height: '500px',
    initialValue: '# content to be rendered'
});
...

Be careful not to load both the editor and the viewer. Since the editor already includes the viewer function, you can initialize editor by calling Editor.factory() with viewer option true value to make the editor a viewer. You can also call getHTML() to get rendered HTML string.

var Editor = require('tui-editor');
...
var editor = Editor.factory({
    el: document.querySelector('#viewerSection'),
    viewer: true,
    height: '500px',
    initialValue: '# content to be rendered'
});
...

TOAST UI Editor respects CommonMark and GFM. So any Markdown renderer including markdownit can handle the content it made. You can use any of those renderer without Viewer if you want.

fajarnorman/tui.editor