Let’s see WYG with these editors
All developers know: a web page is made of code. Even if you’re not a developer, you probably knew this already.
Over the years, the amount of new coding languages and frameworks has increased tremendously. We got updates to existing languages like HTML and PHP, new ones like Swift and new frameworks like Vue.js.
That doesn’t mean that everyone needs to learn these new languages and frameworks. If that were the case, the internet would not grow so rapidly!
While the basics of websites are often coded by developers, the majority of the content is published by less tech-savvy people. But how are they able to do so without knowing all ins and outs of coding?
Let’s meet the WYSIWYG-editors!
WYSIWYG (pronounced wiz-ee-wig) stands for “What You See Is What You Get” and refers to the fact that the end result is immediately visible on the screen.
There are all kinds of editors. Some can only be used to format text, while others can render HTML codes and display how the rendered HTML code will be displayed in a browser.
Text editors like Word are also WYSIWYG-editors by the way; they are just not the best option to write HTML ;-).
The first WYSIWYG-editors for HTML emerged in the last few years of the 20th century. Examples are Microsoft FrontPage and Adobe Dreamweaver.
Of course these tools were used to build an entire website from the ground up, not just to manage content. Currently, website and content are usually managed separately. Despite this, these tools is where it all began.
Ever since then, a lot of similar products have been launched. Nowadays, there are a lot of embeddable editors to be used in other software, whereas in the past the editors were just stand-alone applications.
How do we know which is the best embeddable WYSIWYG-editor out there?
In order to answer that question, I’ve compared some (free) WYSIWYG-editors based on the following criteria. Please note that I based these criteria on my own experience as a developer.
Requirements
- Styles (e.g. headings)
- Text alignments
- Lists
- Ordered (numbered lists)
- Unordered (bullet lists)
- Bold
- Italics
- Tables
- Links
- Media inserts (images / video)
The required criteria are criteria which I think are essential in order to be able to mark up web pages nicely. They contain options which should be familiar to most of you, as they are present in modern text editors as well.
Nice to haves
- Read-only mode (show context but don’t edit)
- Undo/redo
- Source code view
- Indentation (in the visual mode)
The nice to have criteria come in handy for whenever you’re developing an application in which the editor needs to be a bit more advanced. Some examples are undo/redo functionality and support for text indentation.
Some editors do have a read-only mode, which means they can be used to display the content but the user is not able to make any changes to it. Finally, there’s the source code view, which allows some fine-grained control for the final tweaks to the code.
In order to be eligible for a comparison, the editor needs to support at least the required features. If you would like an extended list, just have a look at this list of awesome WYSIWYG-editors.
The editors I compared for this review are:
CKEditor 5
CKEditor (formerly known by the name FCKeditor) is one of the most well-known editors out there. It’s referred to as “the best browser-based rich text editor” and accompanied by extensive documentation.
Pros
- CKEditor is available in 4 modes:
Classic
Good-old editor style as we’ve been using for years in our favourite text-processing software like MS Word or Pages.
Balloon
Non-intrusive editor, just double-click anywhere in the content and the editor is there, ready to serve your needs.
Inline
Almost the same as the Balloon mode, but pops up in a fixed position.
Document
An editor with the look-and-feel of a text editor. - Plugins, themes and languages are customisable.
- Framework available when extensive modifications are needed.
- Auto-formatting automatically recognised the content and thus speeds up the process of creating content.
- Read-only mode
- Compatible with various JavaScript frameworks.
Cons
- Some powerful, new features like Easy Image and Collaboration require a (paid) cloud subscription.
- Does not fully support Microsoft Edge (and is not compatible with Internet Explorer 11).
- The “View source” option is no longer supported.
Jodit v.3
Jodit is a Lightweight, but powerful WYSIWYG-editor which has quite some features and documentation.
Pros
- Browser support for Internet Explorer 9, latest Chrome, latest Firefox, latest Safari and Microsoft Edge.
- It’s completely written in TypeScript; no need for any dependencies or libraries.
- Drag & drop editor (e.g. drag & drop files directly into the editor)
- Read-only mode
- Source code feature out of the box, easily switch between the visual editor and the source code
- Customisable toolbar via the Playground
- Insert media via links
Cons
- Only mentions compatibility with the latest browser versions, so there is no official support for older browsers.
- Images can be inserted as Base64 URI, but this has some drawbacks as well (increased document size and no possibility to cache the images).
Summernote
Summernote is a “Super simple WYSIWYG Editor on Bootstrap”. It supports Bootstrap 3 and Bootstrap 4. There’s even a light version available which works without Bootstrap.
Pros
- Supports themes, so your editor can seamlessly fit into the style of your website.
- Read-only mode
- Zero dependencies
- Meets all requirements AND nice to haves.
Cons
- Stores image uploads as base64 encoded images (tip: store the images on a server using PHP)
TinyMCE 4
TinyMCE is another popular WYSIWYG-editor that is used by many people. One of the reasons that it is used so frequently is that it ships with WordPress (which currently powers 32% of the internet). Extensive documentation is available online.
Pros
- TinyMCE is compatible with all major browsers.
- Plugins, skins and languages are customisable.
- Read-only mode
- Integrates with other packages like Angular, React and Vue.
- Source code feature
- Information window in the editor provides an overview of installed plugins with links to the docs for quick reference.
- Zero dependencies (for dist version)
Cons
- Premium functionalities require a pricey subscription
- If you need support for legacy browsers, you should use version 4.5.x, which is maintained with critical fixes.
Tiptap
When you’re in need for a WYSIWYG-editor to use in your Vue.js application, definitely check out Tiptap.
Pros
- Supports HTML and JSON format (import and export).
- Read-only mode
- Renderless, which means you’ll have (almost) full control over markup and styling.
- Zero dependencies (though it’s designed to be used with Vue.Js)
Cons
- Needs Vue.Js
- Does not support uploading images (at the time of writing)
Toast UI Editor
The Toast UI Editor is a productive and extensible WYSIWYG-editor which supports GFM (GitHub Flavored Markdown) as well as CommonMark. Though it seems targeted to the Markdown format, it provides some basic text editing functionalities too.
Pros
- Compatible with all major browsers.
- Markdown mode provides a live preview, sync scrolling of code and preview windows and checks the Markdown code for errors.
- The editor looks very clean; it provides just the toolbar.
- Copy and paste-support: paste anything from a browser, screenshot, Excel, Powerpoint, etc. right into the editor.
- Read-only mode
- Source code feature
Cons
- Available extensions (partly) depend on external developers.
Trix
Trix features a sophisticated document model and support for embedded attachments. Writing content has never been that easy.
Pros
- The editor looks very clean; it provides just the toolbar and the icons are quite big.
- Zero dependencies
- Open-source project by the creators from Ruby on Rails.
Cons
- It needs additional handling for storing images.
- No option to view/edit the source code.
And here’s the verdict
7. CKEditor 5
It has dependencies on other packages and needs additional packages for completing the functionalities. On top of that, CKEditor 5 has browser compatibility issues.
6. Toast UI Editor
Toast UI Editor has the same drawbacks as CKEditor 5, but it should be compatible with more browsers.
5. Tiptap
Although Tiptap has no dependencies, it needs Vue.js and does not support indentation.
4. Trix
Trix does not have the ability to view the source code of the content.
3. TinyMCE 4
You need a paid subscription if you would like to use some advanced functionalities of TinyMCE4. In order to support legacy browsers, you are required to use an older version, which only receives critical fixes.
2. Jodit
Jodit is a lightweight editor. I did not consider it to be the best one of these seven because the documentation is quite concise. I could not verify that it is compatible with older browser versions.
1. Summernote
Overall winner of this comparison is Summernote. This lightweight WYSIWYG-editor meets all requirements ánd nice to haves. Additional benefits include the compatibility with Bootstrap (version 3 and 4), extensive documentation and compatibility with all major browsers.
Now it’s up to you!
Do you have any experience with these editors? What are your thoughts about them? Or did you miss your favourite WYSIWYG-editor in this list?
Feel free to share your opinion :-)
Written by Glenn Mulleners, Developer at Maatwebsite
