jQuery Plugins › jQuery Text Plugins › jQuery tui.editor

Extensible WYSIWYG Markdown Editor For jQuery - tui.editor

File Size: 4.19 KB
Views Total: 13437
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#editor#WYSIWYG Editor#markdown editor
Extensible WYSIWYG Markdown Editor For jQuery - tui.editor

tui.editor is a powerful, extensible, full-featured, multi-language WYSIWYG Markdown Editor which can be implemented in either JavaScript or jQuery.

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.
  • Vanilla JavaScript version is available here.

Basic Usage (jQuery Version):

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 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
$('#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
});

Changelog:

v2.5.4 (2021-12-04)

  • Checked if the mso-list attribute is available before treating a paragraph as a list item. 
  • Fixed frozen browser when cutting table contents.

v2.5.3 (2021-07-14)

  • Fixed broken composition in squire selection.
  • Fixed wrong converting bullet list item with the ordered number contents.

v2.5.2 (2021-04-16)

  • Bug Fixes

v2.5.1 (2020-12-23)

  • Bug Fixes

v2.5.1 (2020-11-25)

  • Bug Fixes

v2.5.0 (2020-10-21)

  • Add and edit link to image
  • Support Portuguese language
  • Fix a problem that when copying a child list, it was pasted in an indented state
  • Revised Norwegian for i18n

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.10 (2019-12-13)

  • Fix: broken list in table when changed to markdown

v1.4.9 (2019-11-14)

  • Fix: occurs script error when an inline element contains br

v1.4.7 (2019-10-07)

  • Improved cursor of table in wwe.
  • Bugfixed.

v1.4.6 (2019-08-13)

  • Fix: exception when preview is not shown
  • Fix: line break works correctly
  • Fix: redo is not work on table
  • Fix: convert newline to <br> when pasted from WWE
  • Fix: remove double brs on preview
  • Fix: add tag for style priority

v1.4.5 (2019-08-02)

  • Added Italian translation
  • Preserve the existing HTML when initializing Viewer
  • Fixed space in span disappear when covert to wysiwyg

v1.4.4 (2019-07-19)

  • Lots of bugs fixed.
  • Refactor: change naming (reflect code review)

v1.4.3 (2019-06-19)

  • Fix: exception when styleNode does not have br
  • Fix: make div in table when replaceContent is executed
  • Fix: position of task image is wrong in wysiwyg
  • Fix: left/right key works wrong around hr

v1.4.2 (2019-06-07)

  • Fix: differ newline processing between viewer and MS office when pasting
  • Fix: data-tomark-pass appear when converting 
  • Fix: heading is not pasted in wysiwyg 
  • Fix: space is not convert html entity when pasting
  • Fix: Cursor is inserted in HR
  • Fix: not insert data-tomark-pass when img tag has src
  • Fix: alttext do not work in addImageBlockHook
  • Fix: side-effect
  • Fix: side-effect
  • Refactor: remove unused text

v1.4.1 (2019-05-27)

  • Add Swedish language
  • Implement to maintain tag inserted in markdown
  • Implement list in table
  • Bug Fixes

v1.4.0 (2019-05-14)

  • Use :before as clickable task area
  • Add Galician language
  • Add env param for render of markdownit
  • Add api for setting preview delay time
  • Add link attribute option 

v1.3.3 (2019-03-18)

  • Feat: toggle bold, italic, strike
  • Bugs fixed
  • Refactor: isInTable function is used in overall code
  • Refactor: some function move domUtils for general use
  • Refactor: isInTable function is moved to WysiwygEditor
  • Refactor: reflect code review
  • Refactor: rename isStyledTextNode to isStyledNode

2019-03-07

  • v1.3.2: Bugfixed

2019-02-20

  • v1.3.1: feat: customize toolbar

2019-01-11

  • v1.3.0: fix: shortcut of blockquote and task is not work

2019-01-03

  • v1.2.10: fix: when not selecting image file, exception in edge; add new options for customconvertor

2018-12-27

  • v1.2.9: perf: improve getMarkdown by change regular expression

2018-07-20

  • fix: switching to ww cause scrolling

This awesome jQuery plugin is developed by nhnent. For more Advanced Usages, please check the demo page or visit the official website.