Description
Today CommonMark is the de-facto Markdown standard. GFM (GitHub Flavored Markdown) is another popular specification based on CommonMark - maintained by GitHub, which is known as the biggest Markdown user. TOAST UI Editor respects both CommonMark and GFM specifications. Write documents with ease using productive tools provided by TOAST UI Editor. You can open this document wherever the specifications are supported.
TOAST UI Editor alternatives and similar libraries
Based on the "Editors" category.
Alternatively, view TOAST UI Editor alternatives based on common mentions on social networks and blogs.
-
medium-editor
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution. -
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
CKEditor 5
Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing. -
SimpleMDE
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking. -
wysihtml5
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles. -
EpicEditor
EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it. -
Materio Free Vuetify VueJS Admin Template
Production Ready, Carefully Crafted, Extensive Vuetifty Free Admin Template ๐คฉ -
Bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io -
Everright-formEditor
:guide_dog: Powerful lowcode|vue form editor,generator,designer,builder library. It provides an easy way to create custom forms. The project is extensible, easy to use and configure, and provides many commonly used form components and functions(vueๅฏ่งๅไฝไปฃ็ ่กจๅ่ฎพ่ฎกๅจใ่กจๅ็ผ่พๅจใelement-plus vant่กจๅ่ฎพ่ฎก) -
data-structure-typed
Javascript Data Structure & TypeScript Data Structure. Heap, Binary Tree, Red Black Tree, Linked List, Deque, Trie, HashMap, Directed Graph, Undirected Graph, Binary Search Tree, AVL Tree, Priority Queue, Graph, Queue, Tree Multiset, Singly Linked List, Doubly Linked List, Max Heap, Max Priority Queue, Min Heap, Min Priority Queue, Stack. -
React Chat UI
Build your own chat UI with React Chat UI components in a few minutes. React Chat UI Kit from minchat.io is an open source UI toolkit for developing web chat applications.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of TOAST UI Editor or a related project?
README
GFM Markdown and WYSIWYG Editor - Productive and Extensible
๐ฉ Table of Contents
- [Packages](#-packages)
- [Why TOAST UI Editor?](#-why-toast-ui-editor)
- [Features](#-features)
- [Examples](#-examples)
- [Browser Support](#-browser-support)
- [Pull Request Steps](#-pull-request-steps)
- [Contributing](#-contributing)
- [TOAST UI Family](#-toast-ui-family)
- [Used By](#-used-by)
- [License](#-license)
๐ฆ Packages
TOAST UI Editor
Name | Description |
---|---|
@toast-ui/editor |
Plain JavaScript component |
TOAST UI Editor's Wrappers
Name | Description |
---|---|
@toast-ui/react-editor |
React wrapper component |
@toast-ui/vue-editor |
Vue wrapper component |
TOAST UI Editor's Plugins
Name | Description |
---|---|
@toast-ui/editor-plugin-chart |
Plugin to render chart |
@toast-ui/editor-plugin-code-syntax-highlight |
Plugin to highlight code syntax |
@toast-ui/editor-plugin-color-syntax |
Plugin to color editing text |
@toast-ui/editor-plugin-table-merged-cell |
Plugin to merge table columns |
@toast-ui/editor-plugin-uml |
Plugin to render UML |
๐ค Why TOAST UI Editor?
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
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 follows 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.
- Live Preview : Edit Markdown while keeping an eye on the rendered HTML. Your edits will be applied immediately.
- Scroll Sync : Synchronous scrolling between Markdown and Preview. You don't need to scroll through each one separately.
- Syntax Highlight : You can check broken Markdown syntax immediately.
Easy WYSIWYG Mode
- Table : Through the context menu of the table, you can add or delete columns or rows of the table, and you can also arrange text in cells.
- Custom Block Editor : The custom block area can be edited through the internal editor.
- Copy and Paste : Paste anything from browser, screenshot, excel, powerpoint, etc.
UI
Toolbar : Through the toolbar, you can style or add elements to the document you are editing.
Dark Theme : You can use the dark theme.
Use of Various Extended Functions - Plugins
CommonMark and GFM are great, but we often need more abstraction. The TOAST UI Editor comes with powerful Plugins in compliance with the Markdown syntax.
Five basic plugins are provided as follows, and can be downloaded and used with npm.
chart
: A code block marked as a 'chart' will render TOAST UI Chart.code-syntax-highlight
: Highlight the code block area corresponding to the language provided by Prism.js.color-syntax
: Using TOAST UI ColorPicker, you can change the color of the editing text with the GUI.table-merged-cell
: You can merge columns of the table header and body area.uml
: A code block marked as an 'uml' will render UML diagrams.
๐จ Features
- Viewer : Supports a mode to display only markdown data without an editing area.
- Internationalization (i18n) : Supports English, Dutch, Korean, Japanese, Chinese, Spanish, German, Russian, French, Ukrainian, Turkish, Finnish, Czech, Arabic, Polish, Galician, Swedish, Italian, Norwegian, Croatian + language and you can extend.
- Widget : This feature allows you to configure the rules that replaces the string matching to a specific
RegExp
with the widget node. - Custom Block : Nodes not supported by Markdown can be defined through custom block. You can display the node what you want through writing the parsing logic with custom block.
๐พ Examples
- Basic
- Viewer
- Using All Plugins
- Creating the User's Plugin
- Customizing the Toobar Buttons
- Internationalization (i18n)
Here are more examples and play with TOAST UI Editor!
๐ Browser Support
Chrome | Internet Explorer | Edge | Safari | Firefox |
---|---|---|---|---|
Yes | 11+ | Yes | Yes | Yes |
๐ง Pull Request Steps
TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.
Setup
Fork main
branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check if there are any errors.
$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor
TOAST UI Editor uses npm workspace, so you need to set the environment based on npm7. If subversion is used, dependencies must be installed by moving direct paths per package.
Develop
You can see your code reflected as soon as you save the code by running a server. Don't miss adding test cases and then make green rights.
Run snowpack-dev-server
snowpack allows you to run a development server without bundling.
$ npm run serve editor
Run webpack-dev-server
If testing of legacy browsers is required, the development server can still be run using a webpack.
$ npm run serve:ie editor
Run test
$ npm test editor
Pull Request
Before uploading your PR, run test one last time to check if there are any errors. If it has no errors, commit and then push it!
For more information on PR's steps, please see links in the Contributing section.
๐ฌ Contributing
๐ TOAST UI Family
๐ Used By
- NHN Dooray! - Collaboration Service (Project, Messenger, Mail, Calendar, Drive, Wiki, Contacts)
- UNOTES - Visual Studio Code Extension
๐ License
*Note that all licence references and agreements mentioned in the TOAST UI Editor README section above
are relevant to that project's source code only.