World of WYSIWYG
Guide to choosing WYSIWYG editors in 2022
Published March 17th, 2022
When I started at Tiny last year, I had to do a lot of work to understand how people choose rich text editors, what they look for, and what leads them to use TinyMCE over others.
Being a former developer myself, it was important to view this through a pragmatic lense – So I evaluated each editor based on a number of factors, including:
- Total cost of ownership
However, this research journey made apparent to me the sheer variety of editors – different types, features and levels of quality behind what, on the surface, seems like a bunch of tools that do the same thing. A systematic approach was needed, to find a valuable offering amongst the noise.
Marketing Manager - TinyMCE
Stage 1: What does the community say?
So, where to begin?
Given the variety of information available, it’s best to start with searching on Google, and looking at the first few results. From there, review sites and blogs give you initial, third-party opinions needed for basic research, and a better sense of perceived credibility around each rich text editor.
With the different review sites and blog content in-hand, the next step was to list the features that a good (better still, great) editor needed. Not all features fit all use cases, so it was crucial to begin exploring who was using the editors and what their needs and wants were.
From there, it became clear it was time to talk to the experts – other developers – to find out what it is they’re looking for in a rich text editor, and what features were important to them.
What are the must-have features of a rich text editor?
5 things to look for in the best rich text editors
Talk to the experts
Speaking with a developer was crucial in the discovery of finding out what editors were best.
Because it revealed a major insight that may seem obvious to some readers, but can be often overlooked – the importance of demos. Demos are the first place developers go to help them make a decision on whether to try or pass on new software.
After approaching a friend – a full stack developer currently working on large scale projects – I had lots of questions about the search process. And given he’d just selected an open source editor for his project, I wanted to know why he chose the one he did.
I started off by asking: “So, what made you choose that editor?”
He replied: “I followed the process that I follow whenever I'm looking for something in my app, or for a component … I just, like, Googled it, and then I went on the website. I played with the demo, looked at how easy it was to get started and then put it in my app.”
It was like all the stars had aligned… and everything suddenly made complete sense to me. Providing a demo for developers to explore is not only helpful, it’s essential. Afterall, are you really going to pick a solution for your app if you haven’t had a chance to use and play with it yourself beforehand?
So to continue, let’s assume that all potential rich text editors have easily accessible demos to play with. How do you actually decide which one is right for you?
What makes you choose one WYSIWYG editor over another?
From my experience in using TinyMCE when I was actively developing, I knew that many decisions were often a case of being familiar enough with a tool that you picked it off the shelf again and again, because you trust it. And if it ain’t broke – why fix it?
But, when I talked to more developers it was interesting to see their thought process wasn’t quite as simple as “I like that demo!”
What it really came down to was features.
Why? Because when you’re building an editing experience within an app, you need to consider:
- Do I need to edit images?
- Will I need to support tables?
- Is the ability to edit not just text, but also code mark-up important?
- What features do my users (or Product Manager) need to see?
- Will I be able to extend the features in future if I need something more advanced?
This is where the differences between the many editors on the market become apparent. It was very obvious, very quickly, that depending on how robust a feature-set you needed, a lot of the open source editors were kicked out of contention for most use-cases.
From there on, it was apparent that the true leaders within WYSIWYG editing were quite a narrow group. So, it then became a question of what was easier to implement, integrate and maintain?
A heavy lift? Out-of-the-box?
Or something in between?
When feature sets are clearly mapped out, it often then becomes a question of how fast can I get started, and how long do I need to spend customizing and integrating this editor? Research has shown that human brains like to put things into tidy categories (it’s considered a ‘quirky habit’ for some people). It’s an important part of the way we put together research material.
For the rich text editors reviewed, the editors on the market fall into three different categories:
- Headless frameworks: that provide a foundation, on top of which you build a custom RTE
- Editor framework plus+: an attempt to give you complete control and complete pre-built solutions depending on when you need it
- Ready-to-use editor: that you simply install, configure and forget about
Example 1: Headless frameworks
It’s very clear that a headless editor framework, like below, requires you to build your own UI. For some projects this is great, but for others it creates an additional technical and design burden – as you create, maintain and update your app on a regular basis.
Example 2: Editor framework plus+
This is an example of an editor framework, but it takes you one step further along the development process, by providing a basic UI. You still need to do some heavy lifting, but it’s fairly straightforward to impose your own needs onto it, if you want to fight the UI.
Example 3: Ready-to-use editor
On the other hand, TinyMCE is a full-featured, ready-to-use editor. It also has 400+ APIs that allow developers to customize it so that it perfectly suits the editing experience they require. Whilst it has a UI that you can use, you can also update it by just picking your app theme and colors without taking on the maintenance burden of the UI itself.
We all love it when technology works perfectly and nothing goes wrong, but how often does that actually happen? That is why in Stage 5 (after selecting which editor you think is the right one), it’s important to look at the support you can get… if things go wrong.
When searching for a rich text editor, check out the tags used on Stack Overflow. Wrap your search word in square brackets ([tinymce], for example) to check on a specific rich text editor on Stack Overflow.
Don’t just look at the number of questions – check how many recent questions have been asked, and answered. Frequent questions, often means frequent answers and a more active community to support you and your projects, if and when you hit a brick wall.
Another quick gauge of this is how often the editor’s team releases updates – an old editor that isn’t updated means bugs and maintenance problems. One with frequent releases could mean you have a better chance of a bug free experience.
Service level agreements for a WYSIWYG
We all hope that 100% of the time when a problem crops up that a quick Google search will solve the issue. But what if it doesn’t? What if it’s a critical bug or issue you need to solve ASAP? Is the editor and the team behind the editor going to be able to help?
When it comes to support, some questions to research come to mind:
- Is support available that you can contact – who can help you?
- Is there a Service Level Agreement (SLA) with documented response times?
- Do you get a dedicated Account Manager who becomes familiar with your needs?
- Where is the company located? Across time zones or concentrated in one place?
Generally, community editors mean less clarity around support for issues. But then again, that may not matter to you, depending on your needs.
Pull it all together
Seeing the value in a great rich text editor was so much easier and clearer after completing my search. It was plainer to see what parts of the editor does the heaviest lifting for certain circumstances and the value that both the community and reliable support provides (in the best and worst times).
However, a crucial part of any search is identifying the needs that the rich text editor has to meet. Set baseline levels and upper reaches for your ‘ideal’ editor, as well as lists of must-have and nice-to-have features. These guide your choice – especially when it gets too confusing and they all seem to be (as I said at the beginning) “like a bunch of tools that do the same thing.”
Doing this search proved that editor’s aren’t all the same: nothing’s simple about text on a screen.
For more information on rich text editors, we researched and compared the most popular
rich text editors
Check out the full side-by-side comparison
and decide for yourself.