GFM Standard + Chart & UML Markdown WYSIWYG Editor | tui.editor

TOAST UI Editor is a GFM Markdown and WYSIWYG Editor – product and extensible. This makes it easy to include the powerful, scalable, full-featured, multilingual WYSIWYG Markdown editor in your web application.

toast ui editor, best markdown editor, wysiwyg markdown editor js, tui editor, wysiwyg markdown editor react, markdown editor vscode, markdown editor online

🤖 Why TOAST UI Editor?

TOAST UI Editor provides Markdown mode and WYSIWYG mode. Depending on what kind of use you want like Markdown production or maybe just Markdown editing. The TOAST UI Editor can be useful for both uses. It offers Markdown mode and WYSIWYG mode, which can be switched at any time.

TOAST UI Editor and you can easily open the produced document wherever specifications are supported.

  • Live Preview: Edit Markdown while observing the displayed HTML. Your modifications will be applied immediately.
  • Sync Scrolling: Synchronous scrolling between Markdown and Preview. You don’t need to scroll through each one individually.
  • Syntax highlighting: You can check your broken Markdown syntax right away.
  • Table: Through the context menu of the table, you can add or delete columns or rows from the table, and you can also arrange the text in cells.
  • Custom Template Editor: The custom blocking area can be edited through the internal editor.
  • Copy and Paste: Paste anything from the browser, screenshot, Excel, PowerPoint, etc.
  • Toolbar: Through the toolbar, you can style or add items to the document you are editing.
    Dark theme: You can use a dark theme.

CommonMark and GFM are great, but we often need a little more abstraction. TOAST UI Editor comes with powerful plugins that are compatible with Markdown format.

Five core plugins are provided as follows, and they can be downloaded and used with npm.

  • Chart: A block of code marked as “chart” will display the TOAST UI schema.
  • Code syntax highlighting: Mark the area of ​​the code block corresponding to the language provided by Prism.js.
  • Color Syntax: With TOAST UI ColorPicker, you can change the color of the editing text using the GUI.
  • Merged table cell: You can combine table header columns and text areas.
  • UML: A block of code marked as “UML” will display UML diagrams.

🎨 Features

  • Viewer: Supports a mode to display only sales data without an edit area.
  • Internationalization (i18n): Supports English, Dutch, Korean, Japanese, Chinese, Spanish, German, Russian, French, Ukrainian, Turkish, Finnish, Czech, Arabic, Polish, Galician, Swedish, Italian, Norwegian, Croatian + language and you can extend.
  • Widget: This feature allows you to configure rules that replace the string corresponding to a given RegExp with a widget node.
  • Custom blocking: Nodes that are not supported by Markdown can be identified by custom blocking. You can display the node whatever you want by writing parse logic with a custom block.

How to make use of it:

Installation & Download

$ npm install tui-editor --save

1. Import tui editor.

<!-- ES Module -->
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

<!-- Browser -->
<link rel="stylesheet" href="dist/toastui-editor.min.css" />
<script src="dist/toastui-editor-all.min.js"></script>
const Editor = toastui.Editor;

2. Create a placeholder for the WYSIWYG Markdown editor.

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

3. Create a new WYSIWYG Markdown editor.

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

4. It also provides a viewer function that allows you to show Markdown content without loading the editor.

const viewer = new Viewer({
      // options

5. Functions 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

All possible options

  • 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

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

See Demo And Download

Official Website(nhn): Click Here

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