GFM Markdown Wysiwyg Editor - Productive and Extensible
Today CommonMark is the de-facto Markdown standard. And GFM (GitHub Flavored Markdown) is another popular specification based on CommonMark maintained by GitHub which is known as the biggest Markdown user. ToastUI Editor respects CommonMark and GFM specifications. Write documents with easy and productive tools provided by ToastUI Editor. You can open this document wherever the specifications are supported.
CommonMark and GFM are great, but we often face requirements beyond the specifications. The ToastUI Editor comes with powerful Extensions in compliance with the Markdown syntax. And it also provides APIs so you can develop your own extensions. Please check here to learn about Extensions.
Here are some of extensions which you can start right on.
- 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
Here you can find and more
ToastUI Editor provides Markdown mode and Wysiwyg mode.
Someone may like the productivity of Markdown, but the other can be looking for a way to make it easier to edit. The ToastUI Editor can be the coordinator of both. It offers Markdown mode and Wysiwyg mode, those can be switched at any time during writing content. Work together conveniently in one document.
- Live Preview: Edit Markdown while keeping 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 those separately
- Auto indent: The cursor will always be where you want to be
- Syntax highlight: You can check broken Markdown syntax immediately
- 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
- i18n: English, Dutch, Korean, Japanese, Chinese + language you extend.
- Viewer: Renders Markdown content with extensions
npm install --save tui-editorbower install --save tui-editorBelow codes are for npm. If you are using bower please see Getting started with bower.
Place a <div></div> where you want ToastUI Editor rendered.
<body>
...
<div id="editSection"></div>
...
</body>Initialize Editor class with given element to make an Editor.
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'
});- 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
Find out more options here
ToastUI Editor provides a Viewer in case you want to show Markdown content without loading the editor. The Viewer has much lighter than the editor.
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. Since the editor already includes the viewer function, you can initialize editor by calling Editor.factory() with viewer option true value to make the editor a viewer. You can also call getHTML() to get rendered HTML string.
var Editor = require('tui-editor');
...
var editor = Editor.factory({
el: document.querySelector('#viewerSection'),
viewer: true,
height: '500px',
initialValue: '# content to be rendered'
});
...ToastUI Editor respects CommonMark and GFM. So any Markdown renderer including markdownit can handle the content it made. You can use any of those renderer without Viewer if you want.
| 10+ | Yes | Yes | Yes | Yes |