tui-editor
Advanced tools
GFM Markdown WYSIWYG Editor - Productive and Extensible
 Chrome |  Internet Explorer |  Edge |  Safari |  Firefox |
|---|---|---|---|---|
| Yes | 10+ | Yes | Yes | Yes |
Standard and Extensible
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.
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:
To learn more about Extensions check the Using Extension
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.
npm install --save tui-editor
bower install --save tui-editor
TOAST UI products are available over the CDN powered by TOAST Cloud.
You can use the CDN as below.
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor.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/
│ ├─ ...
The code provided underneath is for npm + bundler. If you are using bower please see Getting started with bower.
Place a <div></div> where you want TOAST UI Editor rendered.
<body>
...
<div id="editSection"></div>
...
</body>
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'
});
300px | automarkdown | wysiwygtab | verticaltrue | falseFind out more options here
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.
FAQs
GFM Markdown Wysiwyg Editor - Productive and Extensible
We found that tui-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.