Open source WYSIWYG editors compared: Under Pressure

We know content is powerful. The right words can inform and educate, teach and inspire. What supports the content though? That would be the medium that contains the message. It’s just as vital. 

If the medium restricts the audience's access to the content, then the power of content diminishes.

Open source has the potential to empower content. An open source rich text editor, for instance, is one medium that allows content to reach all audiences because the text editor project is open and transparent, to the wider community of interested contributors. 

With this in mind, It’s important to offer access to everyone who needs the best tools for creating content, enabling them to participate freely and seamlessly without barriers. But not everyone does this well.

That’s what this article is for – it’s a list of the open source rich text editors out there, and compares and contrasts their key features. Read on to get some insight into which one is the best fit to get your content out to your audience.

Open Source text editor comparison

What is open source?

Open source software is a software project online that has source code open and available to users. Individuals can access the source code, download it and modify it. There are no limits on downloads and installations. However, the license that the project uses sets some limitations on any commercial projects created with the open source software. 

Closed source is the opposite of open source. It means that a license stops users from viewing the source code, and modifying it.

Find out more on the “what is open source?” question in our article exploring the topic in depth.

1. The TinyMCE project

TinyMCE is an open source WYSIWYG HTML editor that easily integrates into applications of all types and sizes. It’s trusted by millions of developers, and integrated into thousands of applications, such as:

• Content Management Systems (CMSs)
• Learning Management Systems (LMSs)
• Customer Relationship Management (CRM) and marketing automation systems
• Email marketing systems
• Content creation using SaaS software

View the tinymce repo on GitHub.

Positive TinyMCE key features

TinyMCE provides a range of configuration options that allow you to integrate it into your application. You can start customizing with a basic setup, and then configure it for one of three modes of editing:

• TinyMCE classic editing mode
• TinyMCE inline editing mode
• TinyMCE distraction-free editing mode

1. Integration

TinyMCE is easily integrated into your projects with the help of components such as:

• tinymce-react
• tinymce-vue
• tinymce-angular

See the Tiny docs for a full list of integration components.

2. Customization

It’s easy to configure the UI to match the design of your site and applications, and you can configure the editor with as much or as little functionality as you like, depending on your users and requirements.

With 50+ powerful plugins available, adding additional functionality is as simple as including a single line of code. Realizing the full power of most plugins requires only a few lines more.

3. Extensibility

Sometimes your business requirements can be quite unique, and you need the freedom and flexibility to innovate. View the source code and develop your own extensions for custom functionality to meet your own requirements. The API is available to make it easier for you to write custom functionality that fits within the existing framework of TinyMCE UI components.

Negative ongoing TinyMCE bugs

Due to TinyMCE’s development maturity and strong community, bugs for TinyMCE are smaller and less impactful overall. Bugs may appear when chains of event handlers are put together in a specific use-case. Other specific cases may cause forced_root_block to misbehave.

Note: It’s worth pointing out the number of forks (projects using TinyMCE) versus the number of registered issues (community registered features and bugs). Other editors have closer issues to fork numbers, thus indicating less focus on maintenance and improvement.

2. CKEditor 4 and CKEditor 5

The two versions of this open source wysiwyg html editor started as open source projects. Created over 16 years ago, the core CKeditor has passed through different iterations, with the change from CKEditor 4 to 5 representing a leap forward. The community has helped CKEditor progress forward over the past decade and a half.

Software written that includes the open source CKEditor 4 and 5 can include the components as long as the project uses an Open Source License, and is not in direct competition with CKEditor.

Positive CKEditor 4 and CKEditor 5 features

The following are some of the popular plugins:

1. Copy and paste content: Paste from LibreOffice
2. Writing content: Editor Placeholder, Enhanced Image, Color Button
3. Sharing of content: Export to PDF

Negative ongoing development and CKEditor bugs

Several of the issues reported as bugs on git concerning browsers: styling is taken away or not loaded in some browsers when CKEditor 4 is loaded. CKEditor 5 has several issues surrounding writing within the editor, such as column resizing, highlighting, or inline elements.

3. Froala open source WYSIWYG editor

Currently, the Froala editor does not allow you to include the editor inside an open source project, regardless of the license type. While the Froala editor is available to try out for free, to use the Froala editor, you must purchase a license. This includes an activation key, which you then add to your Froala JavaScript to get it working.

Since the project is not open source, comparing the Froala editor to the other open source project would not be a valid comparison.

4. Quill open source WYSIWYG editor

The Quill editor’s open BSD license means that you can freely install and add the editor to any personal or commercial projects. Their license resembles the 3-Clause BSD license, also called the New BSD or modified BSD.

Positive features of the Quill editor

Formatting and styling text stands at the front of Quill’s feature list (inline style, block style, and embedded content). It’s closely followed by the Quill API list. With Quill’s APIs, you can:

• Set, delete, and get text
• Select texts
• Format text or a specific text line
• Blur, focus, or disable the editor itself
• React to events: text change, selection, or editor change

If you visit Quill’s GitHub page, browser compatibility stands out, posted up front of the README.md. Quill boasts compatibility with the major browsers and mobile device operating systems.

Negative ongoing development and Quill bugs

Editor behavior bugs make up most of the reported errors: certain formatting and newlines in the text can clear the editor contents, text pasted into the editor loses all formatting, code block toggle does not revert syntax colors, and ordered lists not resetting.

5. Slate open source editor

This open source WYSIWYG editor, though still currently in Beta (As of August 2022), is designed to plug into the React framework. It’s entirely contributor driven. Its open source license is the MIT license. 

Positive key features of Slate

The customization options are excellent. This goal of the project makes plugins first-class entities. The result is an editing experience that changes based on the required solution. This carries through to the core – Slate is without a schema. There are no assumptions about what project Slate fits into. The drawback? You must implement a lot of editor functionality for yourself.

Negative ongoing issues with Slate

The Slate editor is still in the beta development stage. The architecture remains unfinished at time of writing. Therefore, any bugs listed on the Slate GitHub page at the moment are part of the early growth of the software project before it has reached production. 

6. Tiptap open source editor

Tiptap’s editor operates under the MIT license. They encourage any commercial enterprises using their open source editor component to help fund their maintenance and ongoing support of the project. The editor is new. Version 2.0 released into beta stage in April, 2021. For a new project, 1.4K forks recorded in their GitHub repository represents strong progress.

Positive key features of TipTap

The main feature TipTap brings is that it’s a headless editor, where you can create with building blocks and you can then extend it through the TipTap API. More specific editor features include:

Useful feature combination, for example:

1. List item, bullet list, ordered list, and to-do list included by default

Editor core configuration based around arrays:

2. The text array includes headings configured with a value of: levels: [1, 2, 3, 4, 5,]

Styling controlled by a .prosemirror class:

3. Set up the ProseMirror class to style the container that holds TipTap: .ProseMirror p { margin: 1em 0;} for example.

Negatives issues and TipTap bugs

A major bug that TipTap has recorded is strange behavior when multiple @ mentions tags appear together, and further problems when multiple editors appear on a page. Horizontal rule bugs and @ mentions content moving to the end of the document when text is pasted are other ongoing problems.

7. Lexical open source WYSIWYG

A new text editor, Lexical, opened a repository on GitHub in April, 2022. Lexical makes use of the MIT license, and the editor’s focus is accessibility, extensibility, reliability, and performance. Lexical’s core use case is social media, and not as rich text editor that can fit into different solutions.

Positive features of Lexical

The main feature that sets you up for success with Lexical is the extensibility. Configure a plugin, and then extend how it works by using one of the Lexical APIs to change behavior. You can interact with Lexical through its minimal structure – the three main nodes available for extension:

• ElementNode
• TextNode
• DecoratorNode

Negative ongoing issues with Lexical

As a new project, there are many new bugs that would be expected of a project at an early growth stage. Issues that the project maintainers are no doubt watching from the community are:

• Cursor position problems
• Copy and paste result issues
• Issues with changes made to the DecoratorNode

Screenshot of the TinyMCE WYSIWYG HTML editor.

Looking to try TinyMCE? Here’s the demo

You can access a full featured demo of TinyMCE in the docs on the Tiny website.

Compiling and contributing to TinyMCE

As TinyMCE transitioned to a modern codebase through 2017 and 2018, many external dependencies were added from previously closed-source projects. This became unwieldy to develop, so in June 2019 the decision was made to bring those projects together in a monorepo.

For information on compiling and contributing, see: contribution guidelines.

Want more information?

Visit the TinyMCE home page and check out the TinyMCE documentation.The quickest way to try TinyMCE for yourself is to get a free API Key from Tiny then have it up and running in less than 5 minutes with the TinyMCE quick start guide.