TinyMCE 5.0
Overview
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.
Get TinyMCE 5.0
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.
Upgrade
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.
| 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.
TinyMCE 5.0 demo
-
TinyMCE
-
HTML
-
CSS
-
JS
<textarea id="full-featured">
<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128" /></p>
<h2 style="text-align: center;">Welcome to the TinyMCE Cloud demo!</h2>
<h5 style="text-align: center;">Note, this includes some "enterprise/premium" features.<br>Visit the <a href="https://www.tiny.cloud/pricing">pricing page</a> to learn more about our premium plugins.</h5>
<p>Please try out the features provided in this full featured example.</p>
<h2>Got questions or need help?</h2>
<ul>
<li>Our <a class="mceNonEditable" href="//www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
<li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
<li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium subscriptions</a>.</li>
</ul>
<h2>A simple table to play with</h2>
<table style="border-collapse: collapse; width: 100%;" border="1">
<thead>
<tr>
<th>Product</th>
<th>Cost</th>
<th>Really?</th>
</tr>
</thead>
<tbody>
<tr>
<td>TinyMCE Cloud</td>
<td>Get started for free</td>
<td>YES!</td>
</tr>
<tr>
<td>Plupload</td>
<td>Free</td>
<td>YES!</td>
</tr>
</tbody>
</table>
<h2>Found a bug?</h2>
<p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>
<h2>Finally ...</h2>
<p>Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>
<p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.</p>
</textarea>textarea#mentions {
height: 350px;
}
div.card,
.tox div.card {
width: 240px;
background: white;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 4px 8px 0 rgba(34, 47, 62, .1);
padding: 8px;
font-size: 14px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
div.card::after,
.tox div.card::after {
content: "";
clear: both;
display: table;
}
div.card h1,
.tox div.card h1 {
font-size: 14px;
font-weight: bold;
margin: 0 0 8px;
padding: 0;
line-height: normal;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
div.card p,
.tox div.card p {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
div.card img.avatar,
.tox div.card img.avatar {
width: 48px;
height: 48px;
margin-right: 8px;
float: left;
}var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
tinymce.init({
selector: 'textarea#full-featured',
plugins: 'print preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker imagetools textpattern noneditable help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable export',
tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
tinydrive_dropbox_app_key: 'YOUR_DROPBOX_APP_KEY',
tinydrive_google_drive_key: 'YOUR_GOOGLE_DRIVE_KEY',
tinydrive_google_drive_client_id: 'YOUR_GOOGLE_DRIVE_CLIENT_ID',
mobile: {
plugins: 'print preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker textpattern noneditable help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable'
},
menu: {
tc: {
title: 'Comments',
items: 'addcomment showcomments deleteallconversations'
}
},
menubar: 'file edit view insert format tools table tc help',
toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment',
autosave_ask_before_unload: true,
autosave_interval: '30s',
autosave_prefix: '{path}{query}-{id}-',
autosave_restore_when_empty: false,
autosave_retention: '2m',
image_advtab: true,
link_list: [
{ title: 'My page 1', value: 'https://www.tiny.cloud' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
],
image_list: [
{ title: 'My page 1', value: 'https://www.tiny.cloud' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
],
image_class_list: [
{ title: 'None', value: '' },
{ title: 'Some class', value: 'class-name' }
],
importcss_append: true,
templates: [
{ title: 'New Table', description: 'creates a new table', content: '<div class="mceTmpl"><table width="98%%" border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>' },
{ title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...' },
{ title: 'New list with dates', description: 'New List with dates', content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>' }
],
template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
height: 600,
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_noneditable_class: 'mceNonEditable',
toolbar_mode: 'sliding',
spellchecker_ignore_list: ['Ephox', 'Moxiecode'],
tinycomments_mode: 'embedded',
content_style: '.mymention{ color: gray; }',
contextmenu: 'link image imagetools table configurepermanentpen',
a11y_advanced_options: true,
skin: useDarkMode ? 'oxide-dark' : 'oxide',
content_css: useDarkMode ? 'dark' : 'default',
/*
The following settings require more configuration than shown here.
For information on configuring the mentions plugin, see:
https://www.tiny.cloud/docs/plugins/premium/mentions/.
*/
mentions_selector: '.mymention',
mentions_fetch: mentions_fetch,
mentions_menu_hover: mentions_menu_hover,
mentions_menu_complete: mentions_menu_complete,
mentions_select: mentions_select,
mentions_item_type: 'profile'
});New features
The following new features were added to the TinyMCE 5.0 RC version.
Comments 2.0
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.
Context menu
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.
Context toolbars
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.
Custom menu items
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
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 editor.ui.registry.addSidebar() and onrender is now onSetup.
Refer to the Custom sidebars documentation for more information.
Dialog
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).
Format Painter 1.0
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.
Keyboard navigation and tooltips improvements
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.
Mentions
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.
Modern codebase
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.
New theme - Silver
TinyMCE 5.0 uses a new theme Silver and a new skin Oxide which uses more modern CSS such as flexbox.
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.
Page Embed
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.
Permanent Pen 1.0
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.
Tables
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.
Toolbar buttons
TinyMCE 5.0 uses SVG icons for a better crisp look. Buttons are now added via methods in editor.ui.registry rather than editor e.g. editor.ui.registry.addButton() instead of editor.addButton(). The list of all registered toolbar buttons is also now in editor.ui.registry e.g. editor.ui.registry.getAll().buttons rather than editor.buttons.
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
Menu items are now added via methods in editor.ui.registry rather than editor e.g. editor.ui.registry.addMenuItem() instead of editor.addMenuItem(). The list of all registered menu items is also now in editor.ui.registry e.g. editor.ui.registry.getAll().menuItems rather than editor.menuItems.
UI accessibility
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.
Removed & deprecated features
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.
Editor-Core removed settings
| Setting | Description |
|---|---|
Owing to the enhancements to the new inline toolbar behaviour, |
|
Owing to the changes in the menus and removal of the |
Removed toolbar button types
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.
Removed features
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.
Other removed component configuration settings
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.