[TOAST UI] Markdown WYSIWYG Editor and GFM Standard

tui.editor is the JavaScript version that makes it easy to include a powerful, expandable, full-featured, and multi-language WYSIWYG Markdown editor in your web application.

More features:

CommonMark specification and GitHub Flavored Markdown.
Useful extensions: color picker, histogram, UML, table merge.
It’s easy to create your own accessories.
Simple and WYSIWYG modes.
Live HTML preview with simultaneous scrolling support.
Highlight fitting.
Allows setting content programmatically.

Markdown WYSIWYG Editor | GFM Standard + Chart & UML Extensible

How to make use of it:

Installation & Download.

# NPM
$ npm install tui-editor --save

Include the tui.editor’s information on the webpage.

<link rel="stylesheet" href="dist/toastui-editor.css">
<link rel="stylesheet" href="dist/toastui-editor-viewer.css">
<script src="dist/toastui-editor.js"></script>
<script src="dist/toastui-editor-viewer.js"></script>

Create a placeholder component for the WYSIWYG Markdown Editor.

<div id="example"></div>

Create a new WYSIWYG Markdown Editor and completed it.

var editor = new Editor({
    el: document.querySelector('#example')
});

All potential choices & features to customize the WYSIWYG Markdown Editor.

var editor = new Editor({
    previewStyle: 'tab',
    initialEditType: 'markdown',
    height: '300px',
    minHeight: '200px',
    language: 'en_US',
    useDefaultHTMLSanitizer: true,
    useCommandShortcut: true,
    codeBlockLanguages: _codeBlockManager.CodeBlockManager.getHighlightJSLanguages(),
    usageStatistics: true,
    toolbarItems: ['heading', 'bold', 'italic', 'strike', 'divider', 'hr', 'quote', 'divider', 'ul', 'ol', 'task', 'indent', 'outdent', 'divider', 'table', 'image', 'link', 'divider', 'code', 'codeblock'],
    hideModeSwitch: false
});

Full-featured WYSIWYG Markdown Editor, TOAST UI Editor Plugin/Github