Thousands of products use TinyMCE and its default user interface to enable rich text editing. Nevertheless, some teams go to extraordinary lengths and invest a small fortune to build a custom UI with TinyMCE running underneath it in headless mode as the rich text editing engine. They essentially “opt out” of the TinyMCE UI.
We understand a development team’s desire to be closer to the metal, control everything, or build something unique. However, going it alone comes with disadvantages. By choosing to do-it-yourself, a product misses out on the value of the wider ecosystem of official and third-party plugins and complementary services that leverage the TinyMCE UI. There are also significant ongoing costs in maintaining a custom UI.
We have been asking ourselves: What unmet needs prompt a decision to build a custom UI? Could solving these problems lead us to better serve all developers?
It is with these questions in mind that we have been developing the next major release of TinyMCE.
Truly great out-of-the-box experience
The modern web is changing at a rapid pace. In the past two years alone, there has been a flurry of browser updates: 17 from Chrome, 14 from Firefox, 5 from Safari and 3 from Microsoft Edge. And these releases are adopted more quickly than ever before – within two months they are almost entirely rolled out to users.
TinyMCE’s job as your favorite rich text editor is to keep pace with this new technology and package it up for easy consumption.
A state-of-the-art component library
TinyMCE has more than 30 separate UI components that need to work together flawlessly and look good. Several of them are very specific to rich text editing – such as table grids, character maps, and color pickers. They go well beyond your typical UI library and to replicate them is a big endeavor. Nevertheless, we find some product teams spend thousands of hours developing and wiring up their own components to the editor core.
In building the new library we are also modernizing the default design of the components. As an example, here is the new version 5 color picker versus the version 4 color picker. All of these changes will result in a much more polished and modern user experience.
54 upgraded plugins
Today, Tiny offers a suite of 54 official plugins that do everything from table editing to pasting from Microsoft Word. The plugin architecture enables TinyMCE to keep a lightweight core and still offer a powerful set of features for applications that need them. This suite of plugins has been updated to use the new component library and user interface APIs. With this update, no other rich text editor platform offers such a wide variety of plugins with modern UIs.
For a few of the plugins, we have added niceties to take advantage of features in the new components. For example, the Special Character plugin has received a new tabbed panel for organizing the characters:
This dialog style is known as a collection, and because it’s a shared component we extended the style to the Emoticons plugin. Version 5 now features a dialog and Unicode emoji characters instead of images.
Adaptive mobile and tablet support on by default
Although a majority of content creation still occurs on the desktop, it goes without saying that your application should fluently adapt to mobile and tablet users as well. Around 14% of our CDN traffic is from mobile or tablet, and this is steadily increasing.
Starting in version 5, TinyMCE will now support mobile without the need to specify or load a separate theme. The “Mobile” theme capabilities are being rolled into the main theme and will just work.
Harmony with your app
Skins that fit with your design system
Since the beginning of time, product teams have strived to create unique user interfaces that differentiate their work. In recent years, organizations such as Google, Shopify, Microsoft, WeWork and IBM have taken this further and published design systems such as Material, Polaris, Fluent, Plasma, and Carbon. A design system is a set of design patterns to help build beautiful products, faster. It includes standards for colors, typography, iconography, sizing, and spacing, and a library of UI components that meet these standards. They unite product teams around a common visual language.
A desire to create an editor that fits flawlessly with a design system is another reason that product teams might decide to embark on big DIY projects. In version 5, we wanted to make it simpler to create a skin that would enable the TinyMCE UI to fit easily with any design system.
We will, of course, also provide a great-looking default skin. The “Oxide” skin has been designed to be fresh yet familiar and it is a great starting point – particularly if your organization has not yet invested in a unique design system.
A Medium-style context toolbar
Yet another reason we have seen product teams investing in developing their own UI is to be modern and abandon the classic word processor-style UI. In particular, services such as Medium have popularized a minimalistic look with an in-context or mini toolbar. This context toolbar (as we call it) enables users to apply formatting and layout only when they select text. Even Microsoft Office has provided a mini toolbar as far back as 2010.
TinyMCE has often been involved in launching many new great editing experiences. Version 2 helped launch WordPress, Version 3 helped launch Medium, and Version 4 helped launch LinkedIn Publishing. Obviously, we are proud of our role in launching such popular and well-known services. Fast forward to version 5, and we want to make it easy to configure TinyMCE to be as modern as you want it to be and we want the next great publishing platform to launch with our technology.
This distraction-free style of editing was previously supported using the Inlite theme. However, the Inlite theme had limited functionality and did not get much adoption. In version 5, a context toolbar has been added as a native UI component and the Inlite mode has become a plugin. To emulate something like Medium, you simply enable the context toolbar and hide the menu bar, toolbar and status bar. You might even like to experiment with the right amount of UI for your userbase.
Previously a plugin, the context menu has also been included in the core as a first-class citizen. It will now be available to all plugins that want to register context menu items and actions.
Beautiful custom plugins, built faster
Even with 54 plugins, integrating an editor often requires a custom plugin to meet specific requirements. Often teams will implement the UI for plugins in React, Angular, or Vue, and they are still free to do so.
However, if you want a faster option that integrates seamlessly with TinyMCE and takes advantage of the UI components that fit with the rest of the editor, version 5 introduces a simplified User Interface API. It makes it more straightforward to build beautiful, modern, internationalized, and accessible experiences on top of the editor. Where there were previously many different, undocumented ways to do things there will be now one fully supported way.
Among many benefits, the new UI API makes the process of creating dialogs simpler. The previous APIs in version 4 were largely undocumented and rather challenging to use. By comparison, version 5 will be a breath of fresh air. With the version 5 UI API, you can create your own custom dialogs using JSON to setup UI components such as alerts, buttons, checkboxes, color inputs, drop zones, grids, tab panels and more. You can even create chained dialogs (sometimes known as wizards).
Another common feature we built is an autocompletion API for typing in content. This API was created to simplify our premium Mentions plugin by moving the menu into the open source core, but during development, we realized the API was a match for the search box used by the character map and emoticon dialogs.
What started as an experiment is now a very cool Unicode character picker in the style that has become common among chat applications:
These new developments are just the beginning. In the coming months, you can expect even more UI polish and flexibility. We also have some new premium plugins such as a custom S3 integration for Tiny Drive in the works.
We will be releasing new nightly builds of version 5 that we hope bring plenty of feedback. What do you see that you like? What could we improve on? What should we add? How is the documentation? TinyMCE has always been a community-driven project and we would love to hear your feedback over on Github.
And, of course, we’d like to remind you that TinyMCE is an open source project that has hundreds of contributors and that you can contribute to. It can be a steep learning curve with thousands of lines of TypeScript, but we would love to have you on board and welcome you getting in touch with how you might be able to help. Documentation, translations, or even icon design can be a great place to start. Or, you could sign up for one of our premium plans to help fund the ongoing development, get enterprise support, and access exclusive premium plugins.
You can review the following documentation as you get started with the preview of TinyMCE 5:
We released more than a developer preview
Today, we added file and asset management to all Tiny accounts. If you’re using Tiny Cloud to deploy TinyMCE, read our post Introducing Tiny Drive to learn more.
Read about this and our other huge product announcements on TechCrunch.