Release notes for TinyMCE 5.0

Overview

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:

<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></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.

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.

TinyMCE 5.0 demo

TinyMCE HTML CSS JS Edit on CodePen

<p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /> </p> <h1 style="text-align: center;">Welcome to the TinyMCE Cloud demo!</h1> <h5 style="text-align: center;">Note, this includes some "enterprise/premium" features.<br />Visit the <a href="https://www.tiny.cloud/pricing/#demo-enterprise">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 href="//www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li> <li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</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="text-align: center;border-collapse: collapse; width: 100%;"> <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 id="full-featured"><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>
  <h1 style="text-align: center;">Welcome to the TinyMCE Cloud demo!</h1>
  <h5 style="text-align: center;">Note, this includes some "enterprise/premium" features.<br>Visit the <a href="https://www.tiny.cloud/pricing/#demo-enterprise">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 href="//www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</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="text-align: center;border-collapse: collapse; width: 100%;">
    <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>

tinymce.init({
  selector: 'textarea#full-featured',
  plugins: 'print preview fullpage powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount tinymcespellchecker a11ychecker imagetools textpattern help',
  toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
  image_advtab: true,
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ],
  link_list: [
    { title: 'My page 1', value: 'http://www.tinymce.com' },
    { title: 'My page 2', value: 'http://www.moxiecode.com' }
  ],
  image_list: [
    { title: 'My page 1', value: 'http://www.tinymce.com' },
    { title: 'My page 2', value: 'http://www.moxiecode.com' }
  ],
  image_class_list: [
    { title: 'None', value: '' },
    { title: 'Some class', value: 'class-name' }
  ],
  importcss_append: true,
  height: 400,
  file_picker_callback: function (callback, value, meta) {
    /* Provide file and text for the link dialog */
    if (meta.filetype === 'file') {
      callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
    }

    /* Provide image and alt text for the image dialog */
    if (meta.filetype === 'image') {
      callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
    }

    /* Provide alternative source and posted for the media dialog */
    if (meta.filetype === 'media') {
      callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
    }
  },
  templates: [
    { title: 'Some title 1', description: 'Some desc 1', content: 'My content' },
    { title: 'Some title 2', description: 'Some desc 2', content: '<div class="mceTmpl"><span class="cdate">cdate</span><span class="mdate">mdate</span>My content2</div>' }
  ],
  template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
  template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
  image_caption: true,
  
  spellchecker_dialog: true,
  spellchecker_whitelist: ['Ephox', 'Moxiecode']
 });

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.

TinyMCE is the only editor to have this feature!

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

Tables are better in TinyMCE 5.0 editor. 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
`fixed_toolbar_container`	Owing to the enhancements to the new inline toolbar behaviour, `fixed_toolbar_container` is not required in TinyMCE 5.0.
`insert_button_items`	Owing to the changes in the menus and removal of the `context` property, `insert_button_items` is not required in TinyMCE 5.0. Refer to the Migration guide for a workaround.

Removed themes

Removed events

Removed event	Description
BeforeRenderUi	Fired before the UI was rendered.

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.

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.