Press "Enter" to skip to content

[TOAST UI] Markdown WYSIWYG Editor and GFM Standard | tui.editor

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.

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

TOAST UI Editor


See Demo And Download

Official Website(nhn): Click Here

This superior jQuery/javascript plugin is developed by nhn. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *