tui.editor README

The project's README from github.com/nhn/tui.editor. As one markdown file: README.md.

TOAST UI Editor

GFM Markdown and WYSIWYG Editor - Productive and Extensible

github release version npm version license PRs welcome code with hearth by NHN Cloud

🚩 Table of Contents

📦 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

markdown

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.

Easy WYSIWYG Mode

wysiwyg

UI

Use of Various Extended Functions - Plugins

plugin

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.

🎨 Features

🐾 Examples

Here are more examples and play with TOAST UI Editor!

🌏 Browser Support

Chrome Chrome IE Internet Explorer Edge Edge Safari Safari Firefox 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

📜 License

This software is licensed under the MIT © NHN Cloud.

tui.editor (nhn/tui.editor)

jquery-plugin
Searching Database…

18K ·GitHub
Tui.editor
archived
What is this?TOAST UI Editor is an open-source Markdown editor for the web that offers both a Markdown mode and a WYSIWYG mode, extensible with plugins for charts, UML and code highlighting.
Is it a framework, a library, or a finished app?A front-end component library rather than an app: the core is the plain JavaScript @toast-ui/editor package, with official wrappers for React and Vue.
How do I add it to a project?Install @toast-ui/editor from npm, or take the @toast-ui/react-editor and @toast-ui/vue-editor wrappers; the five official plugins install via npm the same way.
Is the project still actively developed?No — the GitHub repository is archived and read-only, so new features and fixes are not coming; the published npm packages keep working as they are.
Which browsers does it run in?Chrome, Edge, Safari and Firefox are supported, plus Internet Explorer 11 and up.
Can I use it in commercial projects?Yes — it is MIT licensed, free for commercial use; the copyright holder is NHN Cloud.
Can I use it just to display Markdown without editing?Yes — a Viewer mode renders markdown data only, with no editing area.
Can I paste content from other apps like Excel or PowerPoint?Yes — you can paste anything from the browser, screenshots, Excel, PowerPoint, etc., and keep editing it in the editor.
Does the interface come in other languages?It ships 20 UI translations, including Korean, Japanese, Chinese, German, Russian and French, and the i18n setup can be extended with your own.
Can I write my own plugin?Yes — beyond the five official ones, Custom Block lets you define nodes Markdown does not support by writing your own parsing logic, and there is an example of creating a user plugin.
What are similar projects?editor.md, vditor, tinymce, milkdown, ckeditor5, marktext, lexical, masonry
Which topics is it in?jquery-plugin, uml, gfm, commonmark, chart, rich-text-editor, wysiwyg, jquery, syntax-highlighting, dark-mode, editor, i18n
Creator
nhn
Size
80.6 MB
Stars
18K
Updated
CommitFeb 17Release[email protected]Feb 24
Age
11y
Commits · 90 Days