Full-featured WYSIWYG Markdown Editor – tui.editor

Preview:

Description:

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
$ npm install tui-editor --save

Basic Usage:

1. Import the 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 element for the WYSIWYG Markdown Editor.

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

3. Create a new WYSIWYG Markdown Editor and done.

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. 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
});

Changelog:

v3.2.1 (2022-09-29)

• fix: link mark no longer building with misnamed getCustomAttrs

v3.2.0 (2022-08-06)

• feat: add plugin interface (editorCore instance, keymap)

v3.1.10 (2022-07-27)

• fix: add missing type definition

v3.1.9 (2022-07-26)

• feat: add api for converting position to match editor mode

v3.1.8 (2022-07-12)

• BugFixes

v3.1.7 (2022-05-19)

• Add disabledEntityParse on toastMark through mdParser in Plugin

v3.1.6 (2022-05-19)

• Prevent errors when widget rules not match

v3.1.5 (2022-04-24)

• Bugfixes
• Update

v3.1.2 (2021-12-27)

• Bugfixes

v3.1.1 (2021-10-27)

• Bugfixes

v3.1.0 (2021-09-07)

• Added autofocus option to control the focus on initial creation of the editor.
• Bugfixes

v3.0.3 (2021-08-17)

• Bugfix

v3.0.2 (2021-08-06)

• Improved the translation of the Russian.
• Added aria attributes to editor component.
• Bugs fixed

v3.0.1 (2021-07-07)

• Bugfixes

v3.0.0 (2021-06-17)

• Core Module Replacement ➔ Lighter Editor
• Custom Markdown Syntax Support
• Widget Node
• New Design

v2.5.2 (2021-04-16)

• Bug Fixes

v2.5.1 (2020-12-23)

• Bug Fixes

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)

• Bugs fixed

12/20/2018

• v1.2.9: bugfix

11/14/2018

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