TinyMCE 5.0Contribute to this page
TinyMCE 5.0 was released for TinyMCE Enterprise and Tiny Cloud on Tuesday, February 5th, 2019. It includes TinyMCE 5.0.0 and additional changes to premium plugins. The Release Notes provide high-level coverage of the improvements and additions that have been implemented in TinyMCE 5.0 and document known problems in this release, as well as notable bug fixes, deprecated functionality, and other details.
TinyMCE 5.0 has an ARIA WCAG 2.1 standards compliant user interface to make the user interface controls and dynamic content more accessible. In TinyMCE 5.0, more complex controls or dialogs can be written in the new API style while keeping the more straightforward methods of adding buttons and windows.
Include this line of code in the <head> of the HTML page and link to the tinymce.min.js source file. Substitute ‘no-api-key’ with your api key.
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
Signing up for a free API key provides entitlements to all our free plugins. This includes advanced functionality such as the Image tools plugin, which requires a cloud image proxy server to already be configured. Premium plugins can be purchased at any time once the API key has been set up.
Refer to the Quick start docs for more information.
Developers can upgrade their TinyMCE 4.x instances to TinyMCE 5.0 with little or no fuss. For instructions on how to migrate, refer to the Migration guide.
Note: An instance of TinyMCE with heavy customizations could take longer to upgrade. Please contact Customer Support if encountering issues with the upgrade.
Try out TinyMCE 5.0 demo to explore the new UI.
The following new features were added to the TinyMCE 5.0 RC version.
The Comments 2.0 is a premium plugin built on the Annotations API to create comment threads (conversations). Comments 2.0 provides the ability to start or join a conversation by adding comments to the content within the TinyMCE editor.
Refer to the Comments 2.0 documentation, for more information.
The Context menu is no longer a plugin, it is part of the core and always enabled. Where TinyMCE 4.x only supported adding registered menu items, the new context menu also allows plugins to register “sections” of the context menu. These sections are dynamic and may show or hide depending on the cursor position when the context menu is opened. For example, the default context menu config is now
'link image editimage table spelling' which are all plugin section references, not menu items.
The context menu supports both individual menu items and dynamic context menu sections. Refer to the context menu documentation, for more information.
A context toolbar is a pop-up toolbar that appears when a specific type of content is focused. It contains the toolbar buttons relevant to that content. The context toolbar makes a limited number of suitable choices more visible and readily accessible.
Refer to the Context toolbar documentation, for more information.
The Custom Menu items configurations options have changed in TinyMCE 5.0. The
addMenuItem has a new configuration. A new method
addToggleMenuItem has been added which is an explicit method for creating toggle menu items similar to the new special toolbar button methods.
Custom sidebars allow developers to add custom tools and widgets to a sidebar within the editor. In TinyMCE 5.0 the configuration has changed slightly. The method for registering custom sidebars is now
onrender is now
Refer to the Custom sidebars documentation for more information.
The Dialog API allows showing dialogs (sometimes referred to as modals) in the user application. For example, the plugin that is used to view the source code is an example of a simple dialog that displays the HTML code from the content.
This API supports the use of dynamic content for all aspects and is easily configurable and overridable. The dialogs can be used to display complex information by using layouts components like tabs or columns to help present information to the user (e.g., help dialog or special characters dialog are tabbed dialogs).
The Format Painter premium plugin allows copying and pasting formatting (such as font style and size) from one location to another. The Format Painter is capable of working with a wide variety of formats and styles such as inline & block formats and table styles.
The Format Painter may be used through keyboard shortcuts or a toolbar button. Refer to the Format Painter documentation, for more information.
TinyMCE is up-to-date with the latest accessibility standards. This includes the review of shortcuts and ensuring tooltips when used with keyboard navigation. The editor can now reflect accurately where and what a user is interacting with.
A new experimental feature has been added that allows using the tab across all TinyMCE toolbars, sidebars, content, and footer bar. This allows more granular control to quickly jump to the appropriate editor control and then navigate down to its specific feature sets.
The Mentions plugin makes it possible for users to send notifications using @username in the document.
Mentions is available for download through TinyMCE Cloud. Include the mentions parameter in the tinymce.init script. Refer to the Mentions documentation, for more information on setup and configuration.
TinyMCE 5.0 codebase has been extensively rewritten with the focus on converting the UI components to a more modern UI framework. As a consequence of this rewrite, all the related features have been updated.
The new framework takes advantage of the latest CSS3 features for consistent styling and is ARIA WCAG 2.1 standards compliant.
The new UI framework has a stricter API for creating components, which means that the code is more structured and has an in-built validation combined with TypeScript. This strictness makes the code cleaner, more stable, and easier to maintain and troubleshoot.
TinyMCE 5.0 uses a new theme Silver and a new skin Oxide which uses more modern CSS such as
A Skin in TinyMCE is used to make changes to the appearance of the editor, for example, colors, margins, paddings, fonts, icons, etc.
A Theme creates the editor construction (left, top, bottom, or right of the editing area - vertical or horizontal, inline or outside, etc.).
A skin usually changes the color scheme of a button, dialog, etc. while the theme applies to the whole editor including its functionality and has dependant skins to change the appearance.
In TinyMCE 5.0 the Silver theme contains a set of configurable UI components that could be used to replace the current customizations (modern, inline, and distraction-free theme). Silver is enabled by default if a theme is not specified.
The Page Embed premium plugin allows inserting content from another source, such as an advertisement, on a Web page.
This plugin is used to embed another document within the current HTML document and display this content, including scrollbars and borders.
Using the Page Embed feature can enable including content like Google maps or a video from YouTube in the website content.
The embedded content is an independent HTML document, referenced in the
src attribute of each element. Hence it is a fully independent resource, referenced from the current document.
Refer to the Page Embed documentation, for more information.
The Permanent Pen is a premium plugin that allows adding comments or responses in emails or other documents, without having to change the text color or style.
For collaborative projects, the Permanent Pen enables adding text in a different color, typeface and type style, or font than the default font settings. This allows each user to work in a different colored permanent pen making it easy for everyone to see who contributed to the document by the color of the text.
Permanent Pen works in standard text content.
For premium users, the Permanent Pen function is available in the toolbar. Click anywhere in the text field to use the Permanent Pen function.
Refer to the Permanent Pen documentation, for more information.
Creating and configuring tables in TinyMCE 5.0 is simpler.
This feature has been enhanced by modifying the code to ensure the styles are correct and consistent. The Styles text field has been removed from the advanced table properties dialogs. The dialog configuration is now much less confronting and confusing for non-developers.
Border input field in the table properties dialog is now called
Border width for clarity. Refer to the Tables documentation, for more information. Tables are enriched with the following new additions:
Using CSS for styling - TinyMCE 5.0 uses CSS more for styling. Thus few legacy and outdated data attributes that were being configured on tables, rows, and cells and no longer adhered to the industry best practices, were removed. HTML is now cleaner and shorter.
Autofill values - In TinyMCE 5.0, the Autofill feature is used while opening a properties dialog with a single table, row, or cell selected. The dialog will fill automatically with the relevant existing values. In TinyMCE 4.x., if multiple rows or cells are selected to open the relevant properties dialog, all the dialog fields are left blank. In TinyMCE 5.0, fields which have the same values for all the selected rows or cells are filled automatically, and the fields which have no existing value or have different values are left empty.
TinyMCE 5.0 uses SVG icons for a better crisp look. Buttons are now added via methods in
editor.ui.registry rather than
editor.ui.registry.addButton() instead of
editor.addButton(). The list of all registered toolbar buttons is also now in
editor.ui.registry.getAll().buttons rather than
To make the creation of custom toolbar buttons easier, new methods were added for split, toggle, and menu toolbar buttons with configuration options specific to the button type.
Refer to the Toolbar buttons documentation, for more information.
Menu items are now added via methods in
editor.ui.registry rather than
editor.ui.registry.addMenuItem() instead of
editor.addMenuItem(). The list of all registered menu items is also now in
editor.ui.registry.getAll().menuItems rather than
The new TinyMCE 5.0 editor has improved UI accessibility for a diverse set of users. Tiny is committed to adhering to WCAG 2.1 standards to ensure content is accessible to everyone.
TinyMCE 5.0 conforms to WCAG 2.1 standards and has a stricter editor UI and workflow to offer a much more accessibility-compliant interface and a consistent workflow. TinyMCE UI can be mouse or keyboard driven.
The new UI delivers a consistent user experience when used with screen readers or browsers in various modes like high contrast on both mobile and desktop platforms. While this may impact a developer’s customization abilities, they receive a more overall consistent user experience.
In TinyMCE 5.0, some configurations have been removed because they are no longer necessary or an improved solution has been introduced. Refer to the Migration Guide, for more information.
| ||Owing to the enhancements to the new inline toolbar behaviour, |
| ||Owing to the changes in the menus and removal of the |
|BeforeRenderUi||Fired before the UI was rendered.|
Listbox is no longer a supported toolbar button type in TinyMCE 5.0. Though listbox has been removed, any functionality provided by custom listbox toolbar buttons can be retained by switching to a different kind of toolbar button using the new methods. The recommended toolbar button type to switch to is the Split button.
The following plugins from TinyMCE 4.x do not require height or width options to be specified in TinyMCE 5.0:
Refer to the Migration Guide, for more information.
Some UI configurations in TinyMCE 5.0 have changed due to an updated UI engine. Please see this section of the Migration Guide for more information.
This section describes issues that users of TinyMCE 5.0 may encounter, as well as possible workarounds for these issues.
Thanks for the feedback!
Can't find what you're looking for? Let us know.