Multi-function Text Editor (MTE) is a WYSIWYG Text Editor that can be embedded in the browser. Today’s introduction to some commonly used rich text editor plug-ins!
1. Draft.js
Draft.js is an open source project from Facebook and is the preferred rich text editor framework for the React project. This is a robust, extensible, and customizable framework. Draft.js follows the same paradigm as the controlled components in React, and provides a component for Editor to render rich text input. It also exposes an EditorStateAPI to handle/store state updates in the Editor component.
The rich text editor features:
- Highly scalable and customizable;
- A large and growing community of open source developers supported by Facebook provides many tutorials and support;
- Seamlessly integrated into the React application, it abstracts the details of rendering, selection, and input behavior using familiar declarative apis;
- The draft.js model is built using IMmutable JS, provides an API with functional state updates, and actively leverages data persistence for scalable memory usage.
GitHub:github.com/facebook/dr…
2. Slate.js
Slate.js is a rich text editor inspired by draft.js. It is a deeply customizable rich editor framework dedicated to React. Like draft.js, it has a good API, a strong plug-in infrastructure, and deep connections to React. Also, the plugin ecosystem is smaller than draft.js, but its plugin quality is better.
The rich text editor features:
- Generate JSON output to make it easier to integrate with other modules;
- Its nested document model supports more complex content structures such as tables, page breaks, and other custom features;
- Extensions can be made using plug-ins;
- Provide good descriptive documentation and interactive presentations.
GitHub:github.com/ianstormtay…
3. Quill.js
Quill.js is a rich text editor with cross-platform and cross-browser support. With its extensible architecture and expressive apis, it can be fully customized to meet your individual needs. Because of its modular architecture and expressive API, you can start with the Quill core and then customize its modules or add your own extensions to the rich text editor as needed. It provides two themes for changing the editor’s appearance, which can be further customized using plug-ins or rules in overwriting its CSS stylesheets. Quill also supports any custom content and format, so you can add embedded slides, 3D models, and more.
The rich text editor features:
- Because of its API-driven design, there is no need to parse HTML or different DOM trees as in other text editors;
- Cross-platform and browser support, fast and lightweight;
- Fully customizable through its modules and expressive apis;
- Content can be represented as JSON, making it easier to process and convert to other formats;
- Provide two themes to quickly and easily change the look and feel of the editor.
GitHub:github.com/quilljs/qui…
4. TinyMCE
TinyMCE is a popular rich text editor. Its goal is to help other developers build elegant Web content solutions. It is easy to integrate and can be deployed in a cloud-based, self-hosted, or hybrid environment. This setting makes it possible to merge frameworks such as Angular, React, and Vue. It can also be extended with more than 50 plug-ins, each with more than 100 customization options.
TinyMCE gives you complete control over your design by creating and editing tables, creating font families, searching and replacing fonts, and changing font sizes. It also offers a variety of cloud security features, including JSON Web tokens and private RSA keys, to better protect your content.
The rich text editor features:
- Real-time collaboration support;
- Advanced tables and complex content support;
- Enhanced media embedding support;
- Automatic link checker;
- The editor can be used in three modes: classic, inline, and no interference;
- Provides cloud security capabilities.
GitHub:github.com/tinymce/tin…
5. wangEditor
WangEditor is a rich text editor for the Web developed in Typescript. It is lightweight, concise, easy to use, open source and free. It is compatible with common PC browsers: Chrome, Firefox, Safar, Edge, QQ Browser, IE11.
GitHub:github.com/wangeditor-…
6. ProseMirror
ProseMirror is a powerful WYSIWYG HTML editor based on ContentEditable that supports collaborative editing and custom document patterns. The ProseMirror library consists of several separate modules. An ideal rich text editor produces structured, semantically meaningful documents that users can easily understand and use. ProseMirror tries to find a way to blend the Markdown editing experience with the traditional WYSIWYG editing experience. It does this by implementing a wySIWYG-style interface that is more restrictive and structured than normal HTML. You can customize the structure and content of the documents created by the editor to suit the needs of your application.
The rich text editor features:
- Real-time collaborative editing: ProseMirror has solid built-in support for real-time collaborative editing, which allows multiple people to edit a document simultaneously.
- Extensible Document structures: Document Schemas allow you to use custom Document structures without having to write your own editor from scratch.
- Modularity: The module mechanism ensures that you load only the modules you need and can replace existing modules as needed.
- Plugins: Plugin systems allow you to easily add additional functionality while packaging your plugins in a simple way.
- Functional: A functional and immutable data structure makes ProseMirror easy to integrate with modern Web apps for complex editing behavior.
- Customization: The core library is small and generic, providing basic support for building different types of editors.
GitHub:github.com/prosemirror…
7. Tiptap
Tiptap is a Vue based, non-render rich text editor that is based on Prosemirror, fully extensible and non-render. You can easily add custom nodes as Vue components. Use non-rendering components (functional components) for almost complete control over markup and styling. The appearance or display position of the menu in the DOM. It all depends on the user.
The rich text editor features:
- Support Vue, React, Svelte and other frameworks;
- Refactoring with TypeScript supports the type system;
- Multi-package code release, the function of each module is more independent, developers can better use on demand;
- More out-of-the-box extensions are available;
- Improved document details, have a document site;
- A higher degree of support for collaborative editing.
GitHub:github.com/ueberdosis/…
8. CKEditor 5
CKEditor is a powerful rich text editor framework with modular architecture, modern integration, and collaborative editing. It can be extended with a plug-in based architecture to bring in the necessary content handling capabilities. CKEditor has been on the market for nearly 15 years and is one of the most prestigious editors due to its wide range of features and legacy software compatibility.
CKEditor 5 is an ultra-modern JavaScript rich text editor with MVC architecture, custom data model, and virtual DOM. It was written from the ground up in ES6 and has excellent WebPack support. Native integration with Angular, React, and vue.js is available.
The rich text editor features:
- Compatible with Electron and mobile devices (Android, iOS);
- You can customize the editor’s color, language, size, toolbar, etc.
- Can be extended through plug-ins;
- Support for pasting from Word, Excel and Google Docs;
- You can insert videos, tweets, snippets of code, mathematical formulas, and more with the Media Embed plugin.
GitHub:github.com/ckeditor/ck…
9. ContentTools
ContentTools is an open source rich text editor that can be added to any HTML page in just a few steps. Once added, you will see a pencil icon on the HTML page. When you click, a toolbox and inspector bar appear. Using these two elements, you can edit, resize, or drag and drop text images, embedded videos, tables, and other content within the page.
ContentTools is designed to provide a full-featured content editor out of the box and a toolkit of classes and functions that you can use to build your own editor. The toolkit includes a set of lightweight user interface classes, a set of tools for performing common editing tasks, and a history stack for managing undo/redo. While the kits provide components that work well together, they can also be used or replaced as needed.
The rich text editor features:
- You can install an editor on any HTML page in a few simple steps;
- You can control which areas of the page are editable;
- You can extend this by adding tools.
GitHub:github.com/GetmeUK/Con…
10. Jodit
Jodit is a beautiful wySIWYG rich text editor written in TypeScript (no libraries required). Jodit supports Chinese language and strong customization.
GitHub：github.com/xdan/jodit