How to configure TOASTUI tui.editor Extensible WYSIWYG Markdown editor in JQuery

In this article we are going to discuss how to configure an Extensible WYSIWYG markdown editor or tui.editor is a powerful editor, extensible, full-featured, multi-language WYSIWYG Markdown Editor which can be implemented in either JavaScript or jQuery.

More features:

1. CommonMark and GitHub Flavored Markdown specifications.
2. Useful extensions: Color Picker, Chart, UML, table merge.
3. Easy to create your own extensions.
4. Simple & WYSIWYG modes.
5. Live HTML preview with synchronous scrolling support.
6. Syntax highlighting.
7. Allows setting content programmatically.
8. Vanilla JavaScript version is available here.

How to install the JQuery version of jui.editor in Website?

1. Install the tui.editor via package managers.

# NPM
$ npm install @toast-ui/editor @toast-ui/jquery-editor --save

2. Include the tui.editor’s files after jQuery library.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toast-ui/[email protected]/dist/toastui-editor.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toast-ui/[email protected]/dist/toastui-editor-viewer.css" />
<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- jQuery Wrapper -->
<script src="https://cdn.jsdelivr.net/npm/@toast-ui/[email protected]/dist/toastui-jquery-editor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@toast-ui/[email protected]/dist/toastui-jquery-editor-viewer.js"></script>

3. Create a container element in which you want to render the WYSIWYG Markdown Editor.

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

4. Call the function to render a basic WYSIWYG Markdown Editor.

$('#example').tuiEditor();

5. 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 that corresponds to the cursor position in the markdown editor
• initialEditType: Initial editor type (markdown, WYSIWYG)
• events: Event list 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.

$('#example').tuiEditor({
  previewStyle: 'tab',
  initialEditType: 'markdown',
  height: '300px',
  minHeight: '200px',
  language: 'en_US',
  useDefaultHTMLSanitizer: true,
  useCommandShortcut: true,
  codeBlockLanguages: 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,
  customConvertor: null
});