What is a Rich Text Editor? A rich text editor, or RTE for short, is a type of text editor software designed to make the writing process more pleasant. An RTE is usually equipped with advanced features, such as spell-check, auto-correction, auto-completion, style formatting options (such as bold, italics or underline), and improved cursor positioning.
Rich text editors let you create documents with text, images, charts, grids, and videos. A rich-text editor has an aim to reduce the effort for users trying to express their formatting as valid HTML markup. So in this post, we’ve collected some awesome rich text editors that can be used as standalone applications or as web components.
Rich text editor (RTE) is a type of web-based text editor that allows the editing of documents formatted with HTML or other style sheet languages. Rich text editors usually allow users to add images and other objects. They provide formatting capabilities such as fonts, colors, lists, paragraph alignment, bulleted and numbered lists, and tables. The WYSIWYG acronym (“What You See Is What You Get”) is often used in the description of RTEs.
Here is a list of rich text editors for you. They can be used as standalone applications or as web-based components.
Draft.js
Now, Draft.js is seemingly the “go-to” rich editor framework for React. It comes straight from the Facebook team, has a deeply “react-ish” API, and powers likes of Facebook Messenger or Twitter.
If you’ve enjoyed working with React before, you’ll love the Draft.js API. Apart from being tailored towards React, it’s clean, simple, and well-documented.
This simplicity, however, affects not only the API but also the whole design of the framework. The framework itself is just a core, with limited functionality but a robust plugin system. This means that you’ll have to either do some more research and find good plugins (here’s a good collection) or build the required plugins on your own.
- Basic operations: 🎉
- UI customizability: 🎉
- Inline formatting: 🎉
- Embeds and blocks: 🎉
- Keyboard shortcuts: 🎉
- Markdown input rules: 😑 (possible through a plugin)
- Good API: 🎉
- Documentation: 🎉
- Maintenance: 🎉
- Grammarly: 🎉
- Nested editors: 😑 (possible, though no resources on that are available)
- Mobile support: 🎉
- Collaborative editing: 👎 (see https://github.com/facebook/draft-js/issues/93)
Simditor
Simditor is a browser-based WYSIWYG text editor. Have no dependencies (plain javascript) and is of high performance, supported Browsers: IE10+, Chrome, Firefox, and Safari.
It’s really easy to use, has a clean interface and the documentation is very clear. The plugin needs to be initialized in a textarea.
TinyMCE
TinyMCE is an open-source (under the GNU Lesser General Public License) rich-text editor released and maintained by Moxiecode. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API. TinyMCE’s plugin system allows you to download themes and plugins to extend the core installation.
Trix – an Open Source WYSIWYG Editor
Trix is another open-source rich text editor from Basecamp. As this editor is used in Basecamp, millions of users are already using it. I wrote a separate article about Trix editor so please check out this article which explains how to use Trix editor in your websites.
I hope you got a basic understanding of the popular free rich text editors. Please share your thoughts and suggestions in the comment section below.
Edtr Io
Edtr.io is a WYSIWYG in-line web editor written in React. Content created with edtr.io looks just like the final page – select any editable element on the page, edit it in-place or drag ’n’ drop it around. Its plugin architecture makes edtr.io lean AND adaptable to any use case at the same time. Edtr.io is of course Open Source.
Trumbowyg
Trumbowyg is only 16kB which means faster page loading. No useless features, just the necessary ones to generate clean, semantic code. Requires jQuery, options, and design are entirely configurable to suit your needs. However, the default design is compatible with the Retina display and optimized for a great and simple user experience.
It can be customized with plugins and is translatable, really flexible, and simple.
NicEdit
NicEdit is a lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features. You can serve NicEdit remotely from the NicEdit website; all you have to do is copy a JavaScript code snipplet and voila – it just works (as well as saving your server some system resources).
Quill
It is basically a Microsoft word that runs inside of the browser. Quill is a modern rich text editor built for compatibility and extensibility.
Summernote
Summernote is a super simple WYSIWYG bootstrap editor. Requires Bootstrap and jQuery, Summernote support autocomplete features, hint for helping typing.
BXE
BXE is an XML-based WYSIWYG editor that allows you to change an entire web page. It has been an open-source application since 2002 – and with a devout following – you might be able to quickly find some help if you run into any issues in the BXE IRC channel.
Slate
It lets you build rich, intuitive editors like those in Medium, Dropbox Paper, or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity.
CKEditor
CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It’s a WYSIWYG editor that brings common word processor features directly to your web pages. It has a large community and it’s very used around the web.
Tiptap (v2)
So, “the winner”, as well as the best rich editor framework for 2021, is Tiptap! It’s built on top of ProseMirror (so my point about it being the best still stands) but provides a much friendlier API, allowing you to create great editing experiences much faster!
There is one caveat, though. You see, when I’m putting TipTap on the podium, I’m actually referring to Tiptap v2.
Tiptap v1 is already a nice, helpful wrapper around ProseMirror, but it lacks good documentation, TypeScript typings and is compatible only with Vue 2.
Tiptap v2 fixes all those issues with improved, framework-independent API, TypeScript rewrite, and great docs. However, it is in beta – closed beta. To access the framework, you have to sponsor its developers on GitHub. A noble cause, but a barrier to entry nonetheless.
They openly stated that the framework will be made available publically once it reaches a goal of $5000/month from GitHub sponsors.
Now, think of it what you will, but personally, I value good products, and Tiptap is one of them. Thus, as a GitHub sponsor, I got access to Tiptap v2, and I must admit – this is the best tool for the job. I can’t say it’s the best rich content editor framework, as it’s the ProseMirror’s role, but it’s a great extension on top of.
With combined APIs and documentation of both tools, you’ll be able to create any rich editor you can think of, just like I was able to create CodeWrite. You’ll still have to learn the ProseMirror API to implement more advanced features, although it’ll come gradually and be much easier thanks to Tiptap wrappers.
So, that’s my no. 1. And you can either wait for it to become public (it’s really close) or sponsor the awesome team behind Tiptap and get access right now!
- Basic operations: 🎉
- UI customizability: 🎉
- Inline formatting: 🎉
- Embeds and blocks: 🎉
- Keyboard shortcuts: 🎉
- Markdown input rules: 🎉
- Good API: 🎉
- Documentation: 🎉
- Maintenance: 🎉
- Grammarly: 🎉
- Nested editors: 🎉
- Mobile support: 🎉
- Collaborative editing: 🎉
MarkItUp!
markItUp! is a JavaScript-based markup editor built on top of the jQuery library. With markItUp!, you can easily turn any HTML Textarea into a fully-featured WYSIWYG editor. It’s lightweight (the script weighs in at only 6.5kb), supports keyboard shortcuts, has a built-in Ajax live preview, and has many more features that make markItUp! an excellent choice.
Marcdown
Lightweight real-time markdown viewer and editor – Simple, clean, and beautiful.
WidgEditor
The widgEditor is an open-source project of Cameron Adams released under the GNU General Public License. It’s a simple and no-fuss HTML rich-text editing solution that converts regular HTML text areas into a WYSIWYG. Because it’s JavaScript-based and designed to degrade gracefully, users with JavaScript turned off will still be able to use the HTML textarea.
Inline formatting: 🎉- Embeds and blocks: 🎉
- Keyboard shortcuts: 🎉
- Markdown input rules: 🎉
- Good API: 😑 (quite complicated)
- Documentation: 🎉
- Maintenance: 🎉
- Grammarly: 🎉
- Nested editors: 🎉
- Mobile support: 🎉
- Collaborative editing: 🎉
Conclusion:
Rich text editors are very popular these days. They come in different flavors and most of them give you great flexibility in terms of how you edit your content. That’s why they are so popular. But if you don’t know what they are for, then it gets harder to detect whether or not your website is using them. You probably wouldn’t be looking for something like this anyway.