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
It is a ready-made WYSYWYG editor that is provided under the BSD license. Developed and maintained by Slab.
Quill provides an API for customizing the interface and expanding capabilities by writing your own modules, and also allows you to override existing ones.
This editor can be seen in products such as Grammarly or Telegra.ph.
An example of an editor created with Quill.
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
This is a framework for creating editors from Facebook, distributed under the MIT license.
This framework is designed exclusively for React and is actively used by the company itself for statuses, comments and the product www.messenger.com.
An example of an editor created using the Draft framework.
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.
{
"blocks":[
{
"data":{},
"depth":0,
"entityRanges":[],
"inlineStyleRanges":[],
"key":"f911q",
"text":"Hello from DraftJS!",
"type":"unstyled"
},
...
]
}
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
WYSIWYG editor providing extensive functionality, although some features are paid.
Distributed under the LGPL.
This editor supports everything that is necessary for writing not only simple things, like statuses and comments, but also for writing large documents of various contents. Also great for collaboration.
This editor is used by Blackboard, Fortinet and more.
An example of an editor created with 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
A framework for creating WYSIWYG text editors, which also provides ready-made assemblies for standard editing tasks.
Distributed under the GPL license.
As well as TinyMCE, it provides a huge amount of functionality suitable for creating both simple and complex documents.
An example of an editor created with CKEditor.
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
It is an open source tool for creating WYSIWYM (what you see is what you mean) text editors, licensed under the MIT license.
Prosemirror editors are used by The New York Times, The Guardian and many others.
Sample editor created with Prosemirror.
Data in Prosemirror
Prosemirror can work with different data formats, including html, markdown and an object of the following type:
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
Free, fully customizable framework for creating rich text editors. Slate lets you create rich, intuitive editors like those in Medium, Dropbox Paper, or Google Docs. Distributed under the MIT license.
Slate can be found in products like Slite, NetlifyCMS and many more.
An example of an editor created with Slate.
Data in Slate
Slate uses its own data schema which looks like this:
"children":[
{
"type":"paragraph",
"children":[
{
"text":"This text is bold.",
"bold":true,
},
],
},
...
]
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.
