Rich Text Editors can be found in almost any web application, but developing it from scratch is quite a daunting task. Fortunately, there are many frameworks to make it easier to build and implement. Especially popular are WYSIWYG (what you see is what you get) editors, in which the content displayed during the editing process looks as close as possible to the final result. We propose to consider some of the popular frameworks for creating such editors and / or ready-made editors, together with their features.
Quill
Quill data
Quill uses its own data schema called Delta.
Pros:
free;
co-editing support;
adapted for different browsers and platforms;
support for customizing the interface;
the ability to add your own plugins.
Minuses:
heavy enough;
duplication of code when redefining modules;
there is no built-in support for nested structures.
Quill is a great choice for those who do not want to create an editor from the "building blocks" themselves, as it is already a full-fledged editor ready to use. Also, this solution is suitable for small articles that do not imply the presence of tables or any other complex structures.
Draft
Data in DraftJS
The framework uses its own data schema, but at the same time it has a flat structure, which does not allow creating nested blocks.
Pros:
free;
allows you to create your own editor that includes the most popular functions.
Minuses:
heavy;
no co-editing support;
flat data structure.
If you need your own simple editor, for example, to write statuses, comments or small articles in a React application, then Draft JS is a good choice.
TinyMCE
Pros:
a large number of free features;
support for nested structures (tables, nested lists, etc.);
allows you to add your own plugins;
there is the possibility of customizing the interface;
supports co-authoring;
follows the WAI-ARIA specification (to improve accessibility);
adapted for different browsers and platforms.
Minuses:
data structure in the form of HTML markup, which is poorly suited for storage and processing on the server;
very heavyweight;
some functionality is paid.
TinyMCE is a fairly powerful editor with a large number of functions and APIs for adding them (although some functionality is paid), but before using it, you should carefully read the license. You will also have to tinker with processing data on the server and storing documents, if necessary.
CKEditor 5
Pros:
adapted for different browsers and platforms;
support for nested structures (tables, nested lists, etc.);
collaboration support;
high availability;
allows you to add your own plugins;
the ability to customize the interface.
Minuses:
data structure in the form of HTML markup, which is poorly suited for storage and processing on the server;
very heavyweight;
some functionality is paid.
The characteristics are the same as those of TinyMCE. A powerful editor, suitable for creating documents of any complexity (tables, formulas and much more), but there are license terms that you should not forget about, and difficulties with the data storage format.
Prosemirror
Data in Prosemirror
Prosemirror can work with different data formats, including html, markdown and an object of the following type:
Pros:
free;
support for nested structures (tables, nested lists, etc.);
collaboration support;
allows you to add your own plugins;
the ability to customize the interface.
Minuses:
takes a lot of time to learn the API.
This framework is suitable for those who need a fairly powerful editor with support for various platforms and those who are ready to spend a significant amount of time to create it learning how to work with the provided API.
Slate
Data in Slate
Slate uses its own data schema which looks like this:
Pros:
free;
lightness;
collaboration support;
allows you to add your own plugins;
the ability to customize the interface;
does not take a lot of time to learn the API;
support for nested data structures.
Minuses:
not fully adapted for Android.
This framework allows you to create editors of different levels of complexity and at the same time has a fairly easy-to-learn API. It also works well for integration with React applications.
