What to consider when choosing the best WYSIWYG HTML editor

So you are looking for a WYSIWYG HTML or rich text editor for your software project but have doubts about what or how to pick. A quick Google search brought up a bunch of comparisons of different editors but after going through them you are still confused. Well, you have every right to be, because choosing a component that will be used to create content on your website or application should not be done after a hasty Google search. Because WYSIWYG editors differ so much, you need to look at them from the perspective of your own particular use case, considering both your software and end-users. Plus even if you have some experience using one in the past, it’s already 2020, and like everything else in software, WYSIWYG HTML editors are probably not where you left them. In case you need a brush up on which features, specifications, and perks you should look for in a WYSIWYG editor, we’ve put together a list of the most important things to consider.

# Is it a versatile editor with a complete set of features?

There are so many features that users expect from an editor, so many must-have basic styling and writing features to list. It would be best, however, to assess the user expectations for each case. Features like tables and copy-paste from other content platforms are the most common but at the same time, these are the most challenging to get right. Make sure to thoroughly test these vital features for your users.

For example, you can prepare a mockup document with content similar to what your users usually create and test features like mixing numbered and bulleted lists with some indentation. Create tables with lists inside, merge cells, add or remove columns and rows, apply styles — and see what happens with your content. Trying out the editor with content as diverse as possible will save you a lot of headaches later. Additionally, check pasting from Word and Google Docs with similar diverse content (including emojis) to make sure the editor will allow your users to reuse content easily.

Other than user-facing features, make sure the WYSIWYG HTML editor also provides necessary backend solutions, such as image uploading and media embedding. Having your own all-around solution with no external tools is better than trying to combine multiple solutions.

It is better to pick one that can be easily configured to fit a wide range of purposes so you do not have to start from scratch every time you need a different type of editor or features. For example, CKEditor can be configured to provide a toolbar with a large number of features, similar to Microsoft Word. At the same time, it can also come with a simple toolbar with a limited set of features to write comments, emails, or instant messages.

It is vital for a good user experience to have the exact editing and UI features the users need instead of a one-size-fits-all solution. Custom configuration of features aligned with your users’ needs should be the second thing to consider before implementing a WYSIWYG HTML editor into your application.

# What is the easiest way to customize the editor?

In the same way a customized editor is a must for a better user experience, picking the easiest way to customize an editor is a must for a better development experience. Online builders are the easiest and quickest way to implement a customized editor.

For example, for CKEditor 5 the easiest way to customize the WYSIWYG HTML editor is using the online builder. You can build your editor by choosing the editor type, plugins and features included, toolbar arrangement, and UI language in 5 simple steps.

However, online builders are not right for every use case, especially if you have custom plugins or need deeper integration with your application. In this case, choose a solution that has not only a well-designed architecture and available APIs, but also the proper documentation and resources to guide you through the customization and integration process.

# Is it an Open Source WYSIWYG HTML editor? Does it have flexible commercial offers?

Open Source software is loved and used by freelance projects, startups and corporations. If the terms and conditions of free Open Source options fit you, your wallet will certainly thank you. However, it may not be able to cover all your needs and somewhere along the way you might need to upgrade to commercial offers. Compared to Open Source, the obvious advantage is a legal one; commercial licenses do not require you to share your source code with the public in any way. Open Source can come with a multitude of obligations depending on the specifics of the license. These could include the requirement to share your entire source code or to have compatibility between software and editor licenses. Commercial licenses come with another equally important, often overlooked advantage: support. A support team can make sure that you understand and integrate the editor correctly, and will be there to help in case you run into a wall. If commercial is the way to go for your project, then confirm the flexibility of the offers.

We offer CKEditor 4 with Open Source GPL 2+, LGL 2.1+ and MPL licenses, while CKEditor 5 is licensed under GPL 2+. We are and have always been big Open Source software supporters. As a result, we also offer free CKEditor 5 licenses for Open Source projects that are incompatible with GPL 2+.

As for commercial licenses and support, we offer a free license for small projects, standard and flexible offers for both startups and enterprises. The standard package offers two support requests per month, ensuring our customer success team with the help of the development team of 30+ engineers will be there for you to solve your issues. However, with the flexible offer, you can customize your support coverage along with your metrics, licensing and billing terms to your benefit. You can even request custom development where the CKEditor team will take care of delivering a tailor-made solution or consulting for you.

# Does it support real-time collaborative editing?

In this day and age, online collaboration and collaborative writing is a big must — especially now, when everybody is working from home. Applications like Google Docs can suffice, but there are concerns over the privacy and security of your data. Plus, sending your users to collaborate in third-party applications is not very productive with all the back and forth they have to do between applications, just to create simple content. The best solution would be a collaborative editor that can be integrated into your own software so you can cater to users’ every need. Unfortunately, not many editors support real-time collaboration but on the bright side, this can make the research and selection process much shorter for you.

CKEditor 5 offers real-time collaborative editing, comments, and suggestions with ready-to-use plugins supported by backend cloud and on-premises solutions. It is, without a doubt, the easiest real-time collaboration setup you can find.

# Interoperability with various apps and environments

At first glance, interoperability of an editor is decided by the browsers, operating systems and development environments it can support. Since you also need to take the preferences of your users into account, the more environments you support, the better. When it comes to implementation, interoperability means, for example, offering integrations for popular JavaScript frameworks like React, Angular or Vue.js. These integrations help get you started right away instead of wasting time figuring out how to fit the editor to a specific platform. However, there is a deeper aspect of interoperability.

Interoperability of the editor output. You may be in a scenario where you want to reuse content and simply need the output from the editor. The quality of the HTML output that WYSIWYG editors produce differs remarkably. Depending on its quality, the editor’s output can be easily consumed by other applications or break your site when you are trying to reuse content.

WYSIWYG HTML editors obviously need to produce HTML, but it is not the only popular markup language. Markdown is so widely used that there is almost no escape from it. For you or your users to be able to reuse Markdown content, your editor of choice should also provide you with clean Markdown output.

In CKEditor’s case, both CKEditor 5 and CKEditor 4 have native integrations with Angular, React and Vue.js, as well as compatibility with various CSS frameworks like Bootstrap, and compatibility with webpack and npm. They both support iOS, Android, Electron, Chrome, Firefox, Edge, Safari and Opera environments while CKEditor 4 also supports Internet Explorer. While both editors provide clean HTML output, CKEditor 5’s data processor allows you to create custom data output including Markdown, JSON or XML.

# Development, documentation quality and communication

Assessing the software’s quality without a deep dive into the code is hard, but not impossible. There are many things that indicate quality. The first thing to examine is the credibility and activity of the editor project. Every day new WYSIWYG HTML editors are created as side projects, hyped in social media and left alone after a short while. When doing your research, make sure that the project is still active and check who is behind it. Is it a one-man fun project, or is it an actual product with a team behind it? How many developers are working on it? What are its commit frequency and history? Check the code coverage, tests, project dependencies and if they are still actively maintained, how often the editor is updated, and what the releases consist of. Blog posts, release notes and documentation usually provide this information.

But no matter how good the quality is, it is burdensome to implement a software component without extensive, well-written documentation. Although its importance is well understood, it is sometimes missing, especially for smaller freelance projects. As mentioned before, documentation, code examples, working samples and other materials should be there to guide you through the integration, configuration, and implementation phase. These resources help you understand the WYSIWYG HTML editor’s structure and how its features work. They also make it easier for you to learn about the technologies behind the editor, as well as create custom plugins.

Another piece of the puzzle is the community and the project’s communication with the community. An active community and project can be a vast source of needed information and support, especially if you opt for an Open Source option. You can check websites like StackOverflow, GitHub, and the project’s social media to get an understanding of the size and responsiveness of the editor’s creators and community. The quality of discussions on these platforms, especially on GitHub, can demonstrate how quickly you can solve issues or bugs when you encounter them.

Software quality is in the DNA of CKEditor. Check our documentation, GitHub repositories and issue discussions to see it for yourself.

# In short, what does it take to find the best WYSIWYG HTML editor?

One of the biggest problems we see with WYSIWYG editors is that they are often discarded as components you set and forget. If you want to have the best WYSIWYG HTML editor in your application, then first you need to commit to keeping it updated. It is not possible to have the forever best editor when browsers, frameworks, and applications constantly get updated and in-application editors are forgotten. If you choose CKEditor, update it regularly for the ideal experience. You can learn about new releases, features, and articles in our monthly newsletter.

To sum up, here is a short checklist to get you going:

• Assess your and your users’ expectations.
• Focus on user productivity and decide what you want the editor to look like.
• Prepare a list of vital, must-have and nice-to-have features.
• Check supported environments and frameworks for the editors.
• Test the editor, its features and its output by creating test content that closely resembles your use case.
• Determine the customization you are going to make and check how the editors provide it.
• Check the APIs, frequency of releases, dependencies, number of developers.
• Assess the documentation as well as community and project communication.
• Make the decision on your choice of editor.
• And last but not least — DO NOT forget to update!

See related articles:

• The best WYSIWYG editor for Vue.js is here
• Build a WYSIWYG editor in-house or use an off-the-shelf solution?
• How to successfully launch a software application on Product Hunt in 2020?
• GitHub Writer: challenge accepted!
• Programming can affect software developers' brains. Learn how!
• A simple on-the-go online HTML editor