Full-featured WYSIWYG Markdown Editor – tui.editor

Author: nhnent
Views Total: 1,254 views
Official Page: Go to website
Last Update: September 16, 2020
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="">
<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 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)
  • previewHeight: Highlight a preview element corresponds to the cursor position in the markdwon editor
  • 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
  • plugins: array of extensions
  • extendedAutolinks: Using extended Autolinks specified in GFM spec
  • customConvertor: convertor extention
  • placeholder:  the placeholder text of the editable element
  • linkAttribute: Attributes of anchor element that should be rel, target, contenteditable, hreflang, type
  • customHTMLRenderer: Object containing custom renderer functions correspond to markdown node
  • referenceDefinition: whether use the specification of link reference definition
  • customHTMLSanitizer: custom HTML sanitizer
  • frontMatter: whether use the front matter
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


v2.4.0 (2020-09-16)

  • Add option to set the FrontMatter
  • Support Croatian language (hr-HR)
  • [Markdown] Add key action to table in markdown
  • Bugfix

v1.4.6 (08/13/2019)



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

Source link

Add comment



All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.