Full-featured WYSIWYG Markdown Editor – tui.editor

Category: Javascript , Recommended , Text | August 13, 2019
Author: nhnent
Views Total: 2,130
Official Page: Go to website
Last Update: August 13, 2019
License: MIT


Full-featured WYSIWYG Markdown Editor – tui.editor


This is the JavaScript version of the tui.editor that makes it easier to embed a powerful, extensible, full-featured, multi-language WYSIWYG Markdown Editor into your web app.

More features:

  • CommonMark and GitHub Flavored Markdown specifications.
  • Useful extensions: Color Picker, Chart, UML, table merge.
  • Easy to create your own extensions.
  • Simple & WYSIWYG modes.
  • Live HTML preview with synchronous scrolling support.
  • Syntax highlighting.
  • Allows to set content programmatically.

Installation & Download

$ npm install tui-editor --save

Basic Usage:

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

<link rel="stylesheet" href="dist/tui-editor.css">
<link rel="stylesheet" href="dist/tui-editor-contents.css">
<script src="dist/tui-editor-Editor.js"></script>

Create a placeholder element for the WYSIWYG Markdown Editor.

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

Create a new WYSIWYG Markdown Editor and done.

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

All possible options & functions to customize the WYSIWYG Markdown Editor.

  • height: Editor’s height style value. Height is applied as border-box ex) ‘300px’, ‘100%’, ‘auto’
  • minHeight: Editor’s min-height style value in pixel ex ‘300px’
  • initialValue: Editor’s initial value
  • previewStyle: Markdown editor’s preview style (tab, vertical)
  • initialEditType: Initial editor type (markdown, wysiwyg)
  • events: eventlist Event list
  • events.load: It would be emitted when editor fully load
  • events.change: It would be emitted when content changed
  • events.stateChange: It would be emitted when format change by cursor position
  • events.focus: It would be emitted when editor get focus
  • events.blur: It would be emitted when editor loose focus
  • hooks: Hook list
  • hooks.previewBeforeHook: Submit preview to hook URL before preview be shown
  • hooks.addImageBlobHook: hook for image upload.
  • language: language
  • useCommandShortcut: whether use keyboard shortcuts to perform commands
  • useDefaultHTMLSanitizer: use default htmlSanitizer
  • codeBlockLanguages: supported code block languages to be listed. default is what highlight.js supports
  • usageStatistics: send hostname to google analytics
  • toolbarItems: toolbar items.
  • hideModeSwitch: hide mode switch tab bar
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


v1.4.6 (08/13/2019)

  • Bugs fixed


  • v1.2.9: bugfix


  • fix: Merging / Unmerging cell in the context menu
  • fix: cursor is wrong after blockquote command exec

You Might Be Interested In:

Leave a Reply