Skip to content
πŸžπŸ“ Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs: example link udpate Jun 7, 2019
examples test: add example for placeholder Jul 19, 2019
src fix: exception occurs when called setEndBeforeRange in Windows 10 Chr… Jul 17, 2019
test fix: emphasis syntax broken when tag is nested (fix: #539) (#558) Jun 28, 2019
.babelrc feat: customize toolbar (ref #85) (#124) Apr 3, 2018
.bowerrc style: tabsize 4 to 2 Dec 21, 2017
.editorconfig chore: editor config line ending unix Mar 30, 2018
.eslintignore style: tabsize 4 to 2 Dec 21, 2017
.eslintrc enhance: update eslint-config-tui v2.2.0 (#513) May 27, 2019
.gitignore docs: update example and jsdoc (fix #1025) Dec 28, 2017
CODE_OF_CONDUCT.md chore: change company name (nhnent -> nhn) (#464) Apr 8, 2019
CONTRIBUTING.md chore: change company name (nhnent -> nhn) Apr 10, 2019
LICENSE chore: change company name (nhnent -> nhn) (#464) Apr 8, 2019
README.md docs: example link udpate Jun 7, 2019
bower.json chore: chart version update to v3.7.0 (#577) Jul 16, 2019
index.d.ts chore: update version v1.4.4 Jul 19, 2019
jsdoc.conf.js chore: change ghpahges Apr 10, 2019
karma.conf.js chore: change company name (nhnent -> nhn) (#464) Apr 8, 2019
package-lock.json chore: update version v1.4.4 Jul 19, 2019
package.json chore: update version v1.4.4 Jul 19, 2019
tsBannerGenerator.js chore: update automatically version for typescript declaration file (#… Dec 27, 2018
tslint.json feat: use namespace (#358) Jan 11, 2019
webpack.config.js chore: chart version update to v3.7.0 (#577) Jul 16, 2019

README.md

logo

GFM Markdown WYSIWYG Editor - Productive and Extensible

github version npm version bower version license PRs welcome code with hearth by NHN

Wrappers

🚩 Table of Contents

Collect statistics on the use of open source

TOAST UI Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Editor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > β€œui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics options when creating editor.

var options = {
    ...
    usageStatistics: false
}
var editor = new Editor(options);

Or, include tui-code-snippet.js (v1.4.0 or later) and then immediately write the options as follows:

tui.usageStatistics = false;

🌏 Browser Support

Chrome Chrome IE Internet Explorer Edge Edge Safari Safari Firefox Firefox
Yes 10+ Yes Yes Yes

Standard and Extensible

standard and extensible image

CommonMark + GFM Specifications

Today CommonMark is the de-facto Markdown standard. GFM (GitHub Flavored Markdown) is another popular specification based on CommonMark - maintained by GitHub, which is the Markdown mostly used. TOAST UI Editor respects both CommonMark and GFM specifications. Write documents with ease using productive tools provided by TOAST UI Editor and you can easily open the produced document wherever the specifications are supported.

Powerful Extensions

CommonMark and GFM are great, but we often need more abstraction. The TOAST UI Editor comes with powerful Extensions in compliance with the Markdown syntax. You also get the flexibility to develop your own extensions using simple APIs.

Here are some of the extensions you can start with:

  • Color picker: ColorPicker provides an easy way to color text with a GUI tool box
  • Chart code block: A Code block marked as a 'chart' will render charts
  • UML code block: A Code block marked as an 'uml' will render UML diagrams
  • Table merge: You can merge columns and rows in tables

To learn more about Extensions check the Using Extension

🎨 Features

TOAST UI Editor provides Markdown mode and WYSIWYG mode.

Depending on the type of use you want like production of Markdown or maybe to just edit the Markdown. The TOAST UI Editor can be helpful for both the usage. It offers Markdown mode and WYSIWYG mode, which can be switched any point in time.

Productive Markdown mode

markdown image

  • Live Preview: Edit Markdown while keeping an eye on the rendered HTML. Your edits will be applied immediately
  • Scrolling Sync: Synchronous scrolling between Markdown and Preview. You don't need to scroll through each one separately
  • Auto indent: The cursor will always be where you want it to be
  • Syntax highlight: You can check broken Markdown syntax immediately

Easy WYSIWYG mode

wysiwyg image

  • Copy and paste: Paste anything from browser, screenshot, excel, powerpoint, etc.
  • Codeblock editor: Highlight 170+ languages with full size code editor
  • Table: Hate the Markdown table? You can do everything with a mouse

And more

  • i18n: English, Dutch, Korean, Japanese, Chinese, Spanish, German, Russian, French, Ukrainian, Turkish, Finnish, Czech, Arabic, Polish, Galician, Swedish + language you extend.
  • Viewer: Renders Markdown content with extensions

πŸ’Ύ Install

using npm

npm install --save tui-editor

using bower

bower install --save tui-editor

Via Contents Delivery Network (CDN)

TOAST UI products are available over the CDN powered by TOAST Cloud.

You can use the CDN as below.

<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css"></link>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"></link>
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js"></script>

If you want to use a specific version, use the tag name instead of latest in the url's path.

The CDN directory has the following structure.

tui-editor/
β”œβ”€ latest/
β”‚  β”œβ”€ tui-editor-Editor.js
β”‚  β”œβ”€ tui-editor-Editor.min.js
β”‚  └─ ...
β”œβ”€ v1.1.0/
β”‚  β”œβ”€ ...

download

πŸ”¨ Usage

The code provided underneath is for npm + bundler. If you are using bower please see Getting started with bower.

Editor

HTML

Place a <div></div> where you want TOAST UI Editor rendered.

<body>
...
<div id="editSection"></div>
...
</body>

javascript

Add dependencies & initialize Editor class with given element to make an Editor.

// deps for editor
require('codemirror/lib/codemirror.css'); // codemirror
require('tui-editor/dist/tui-editor.css'); // editor ui
require('tui-editor/dist/tui-editor-contents.css'); // editor content
require('highlight.js/styles/github.css'); // code block highlight

var Editor = require('tui-editor');
...
var editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

or you can use jquery plugin.

$('#editSection').tuiEditor({
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

or if using the CDN

var editor = new tui.Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

options

  • height: Height in string or auto ex) 300px | auto
  • initialValue: Initial value. Set Markdown string
  • initialEditType: Initial type to show markdown | wysiwyg
  • previewType: Preview style of Markdown mode tab | vertical
  • usageStatistics: Let us know the hostname. We want to learn from you how you are using the editor. You are free to disable it. true | false

Find out more options here

Viewer

TOAST UI Editor provides a Viewer in case you want to show Markdown content without loading the editor. The Viewer is much lighter than the editor.

// deps for viewer.
require('tui-editor/dist/tui-editor-contents.css'); // editor content
require('highlight.js/styles/github.css'); // code block highlight

var Viewer = require('tui-editor/dist/tui-editor-Viewer');
...
var editor = new Viewer({
    el: document.querySelector('#viewerSection'),
    height: '500px',
    initialValue: '# content to be rendered'
});
...

Be careful not to load both the editor and the viewer at the same time because the editor already contains the viewer function, you can initialize editor Editor.factory() and set the viewer option to value true in order to make the editor a viewer. You can also call getHTML() to render the HTML.

var Editor = require('tui-editor');
...
var editor = Editor.factory({
    el: document.querySelector('#viewerSection'),
    viewer: true,
    height: '500px',
    initialValue: '# content to be rendered'
});
...

TOAST UI Editor respects CommonMark and GFM. So any Markdown renderer including markdownit can handle the content made using TOAST UI Editor. You can also use any of these renderer in place of TOAST UI Editor Viewer.

πŸ“™ Docs

🐾 Examples

πŸ’¬ Contributing

🍞 TOAST UI Family

πŸš€ Used By

πŸ“œ License

This software is licensed under the MIT Β© NHN.

You can’t perform that action at this time.