TOAST UI Editor is planning a major update to version 3 for 2021. tui.editor is a powerful, expandable, full-featured, multi-language WYSIWYG Markdown Editor that can be implemented in JavaScript or jQuery.
🤖 Why the TOAST UI Editor?
TOAST UI Editor offers Markdown Mode and WYSIWYG Mode. Depending on what kind of use you want like markdown production or maybe just markdown editing. TOAST UI Editor can be useful for both uses. It offers Markdown mode and WYSIWYG mode, which can be switched at any time.
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, and it’s the most used markdown. The TOAST UI Editor follows CommonMark and GFM specifications. Easily write documents with the productivity tools provided by TOAST UI Editor and you can easily open the resulting document wherever specifications are supported.
- Live Preview: Edit Markdown with Display HTML Monitoring. Your adjustments will be applied immediately.
- Scroll sync: Simultaneous 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.
- Syntax highlighting: You can check out broken Markdown syntax right away.
More features:
- CommonMark specification and GitHub Flavored Markdown.
- Useful extensions: color picker, schema, UML, table merge
- It’s easy to create your own accessories.
- Simple and WYSIWYG modes.
- Live HTML preview with simultaneous scrolling support.
- Highlight fitting.
- Allows setting content programmatically.
- The Vanilla JavaScript version is available here.
How to make use of it:
1. Install the tui.editor by way of package deal managers.
# NPM $ npm install @toast-ui/editor @toast-ui/jquery-editor --save
2. Include the tui.editor’s information 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 during which you need to render the WYSIWYG Markdown Editor.
<div id="example"></div>
4. Call the function to render a primary WYSIWYG Markdown Editor.
$('#example').tuiEditor();5. All attainable choices & capabilities to customize the WYSIWYG Markdown Editor.
$('#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
});Extensible WYSIWYG Markdown Editor, TOAST UI Editor Plugin/Github
See Demo And Download
Official Website(nhn): Click Here
This superior jQuery/javascript plugin is developed by nhn. For extra Advanced usage, please go to the official website.
