TinyMCE 5.5

Overview

TinyMCE 5.5 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, October 21st, 2020. It includes TinyMCE 5.5.1 and additional changes to premium plugins. These release notes provide an overview of the changes for TinyMCE 5.5, including:

This is the Tiny Cloud and TinyMCE Enterprise release notes. For information on the latest community version of TinyMCE, see: TinyMCE Changelog.

TinyMCE 5.5 new features and enhancements

The following new features and enhancements were added for the TinyMCE 5.5 release.

TinyMCE core Typescript types are now public

The TinyMCE core now has a fully-typed programming interface. This will help developers by allowing the TinyMCE APIs to be integrated into developer tools. This change can help developers avoid incorrect usage of the TinyMCE APIs, reducing the likelihood of bugs in custom UI components and plugins. This will also allow some IDEs to provide autocompletion for plugin and component development.

For example:

Example of TinyMCE TypeScript autocompletion in
Microsoft Visual Studio Code

Example of TinyMCE TypeScript configuration option type error in
Microsoft Visual Studio Code

Screenshot of code autocompetion for adding a custom user interface component using TinyMCE APIs in Microsoft Visual Studio Code

Screenshot of a type error while adding TinyMCE configuration options in Microsoft Visual Studio Code

For information on:

New line height support in the editor

TinyMCE 5.5 now supports adjustable line heights. There is a new lineheight button available for toolbars, and a new lineheight menu item (included by default in the format menu). There is also a new LineHeight editor command to change line height and a LineHeight query command value to get the current line height.

For information on:

New persistent toolbar option for inline mode

A new toolbar_persist option has been added for disabling the automatic show and hide behavior of the toolbar and menu bar for inline editors.

For information on the new persistent toolbar option, see: User interface options - toolbar_persist.

The toolbar drawer can now be controlled using commands

A new editor command (execCommand('ToggleToolbarDrawer')) and editor state query (queryCommandState('ToggleToolbarDrawer')) have been added. The command allows the Toolbar Drawer (which holds excess toolbar buttons) to be opened and closed using editor commands. The current state of the Toolbar Drawer can also be queried.

For information on:

Nested menu items for class list, link list, and image list options

TinyMCE 5.5 reintroduces the ability to add nested menu items to the following options:

  • image_list

  • image_class_list

  • link_class_list

  • link_list

  • table_class_list

  • table_cell_class_list

  • table_row_class_list

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'link',
  menubar: 'insert',
  toolbar: 'link',
  link_list: [
    {title: 'Tiny Home Page', value: 'https://www.tiny.cloud'},
    {title: 'Tiny Blog', value: 'https://www.tiny.cloud/blog'},
    {title: 'TinyMCE Support resources',
      menu: [
        {title: 'TinyMCE Documentation', value: 'https://www.tiny.cloud/docs/'},
        {title: 'TinyMCE on Stack Overflow', value: 'https://stackoverflow.com/questions/tagged/tinymce'},
        {title: 'TinyMCE GitHub', value: 'https://github.com/tinymce/'}
      ]
    }
  ]
});

For information on using:

Added the ability to use the browser full screen mode with the fullscreen plugin

A new fullscreen_native option allows the editor to use the browser’s full screen mode instead of only filling the browser viewport. When enabled and the user activates full screen mode, the editor will fill the whole screen, the same as full screen mode for online videos.

For information on the fullscreen_native option, see: Full Screen Plugin - fullscreen_native.

New contextmenu_avoid_overlap option for controlling the placement of context menus

The new contextmenu_avoid_overlap option can be used to prevent context menus from covering the selected node if the node matches the specified CSS selector.

For information on the contextmenu_avoid_overlap option, see: User interface options - contextmenu_avoid_overlap.

Added colgroup support for tables

A new table_use_colgroups option allows colgroup and col elements to be added to new tables. The colgroup and col elements can be used to set column widths. Other attributes are not supported in the TinyMCE 5.5 release.

For information on the table_use_colgroups option, see: Table plugin - table_use_colgroups.

Added cut, copy, and paste table column menu items

Four new menu items have been added to the Table plugin to assist with moving and duplicating table columns:

  • tablecutcolumn

  • tablecopycolumn

  • tablepastecolumnbefore

  • tablepastecolumnafter

For information on the Table plugin menu items, see: Table plugin - Menu items.

New table_column_resizing option for controlling table column resizing

A new table_column_resizing option sets whether a table or other columns are resized when a user resizes a table column.

For information on the table_column_resizing option, see: Table plugin - table_column_resizing.

Changes to the default table CSS

The CSS files bundled with TinyMCE have been updated to better support the styling options available in the table dialog.

New listbox component for custom dialogs

The new listbox component for custom dialogs is a composite component with a label and a dropdown list of options for users to select from. This component displays a menu-like dropdown and allows nested options to be shown to users.

For information on the listbox dialog component, see: Dialog components - listbox.

New hasPlugin for detecting the availability of plugins

The new hasPlugin API method can be used to detect if a plugin is present in the editor configuration or if the plugin has been loaded. This API is useful if custom functionality such as a custom plugin, is dependent on the APIs of a plugin.

For information on the editor.hasPlugin() API, see: tinymce.Editor APIs - hasPlugin.

New StyleSheetLoader unload and unloadAll APIs

Two new APIs have been added for unloading CSS files:

  • unload - Unloads the specified CSS file if it is not in use.

  • unloadAll - Accepts a list of URLs and unloads any CSS files not in use.

For information on the unload and unloadAll APIs, see: tinymce.dom.StyleSheetLoader.

Leading and trailing whitespace now retained by the insert and setContent APIs

The following APIs for setting or adding to the editor content have been updated to keep leading and trailing whitespace:

  • editor.insertContent()

  • editor.selection.setContent()

For information on:

Changed the Image Tools context toolbar icon

The icon for the Image Tools image options toolbar button has changed from an ellipse icon (Icon consisting of three dots horizontally aligned across the center of the icon) to match the image icon (Icon consisting of two hills).

For information on:

For a list of available:

Improved navigation and deletion for media elements without the media plugin

video and audio HTML elements in the editor content no-longer cause navigation issues and can be deleted without the media plugin.

For information on the media plugin, see: Media plugin.

Accompanying Premium Plugin changes

The following premium plugin updates were released alongside TinyMCE 5.5.

Accessibility Checker 2.3.0

The TinyMCE 5.5 release includes an accompanying release of the Accessibility Checker premium plugin.

Accessibility Checker 2.3.0 adds the following features:

Accessibility Checker 2.3.0 also provides the following bug fixes:

  • Fixed the toggleAudit API not accounting for the dialog being closed by dialog buttons or the ESC key.

  • Fixed the error message displayed when the filename of an image clashes with the alt text.

  • Fixed missing bg_BG, eu and id translations.

  • Fixed the editor content scrolling when calling the getReport API.

  • Fixed incorrect strings used for the next/previous button tooltips.

For information on the Accessibility Checker plugin, see: Accessibility Checker plugin.

Advanced Code Editor 2.2.0

The TinyMCE 5.5 release includes an accompanying release of the Advanced Code Editor premium plugin.

Advanced Code Editor 2.2.0 adds support for loading the Advanced Code Editor user interface components when the editor is in a ShadowRoot.

For information on the Advanced Code Editor plugin, see: Advanced Code Editor plugin.

Advanced Tables 1.0.1

The TinyMCE 5.5 release includes an accompanying release of the Advanced Tables premium plugin.

Advanced Tables 1.0.1 has been updated to work with the changes made to the table plugin.

Advanced Tables 1.0.1 is required for TinyMCE 5.5 or higher.

For information on the Advanced Tables plugin, see: Advanced Tables plugin.

Comments 2.2.0

The TinyMCE 5.5 release includes an accompanying release of the Comments premium plugin.

Comments 2.2.0 introduces a localized user interface, allowing the Comments interface to render in different languages.

Comments 2.2.0 also provides the following bug fixes:

  • Fixed the editor’s referrer_policy setting not working when loading additional resources to improve bundling of the plugin and improving load times.

  • Fixed elements incorrectly left in the DOM when the editor was removed.

For a list of supported languages, including professionally translated language packs, see: Localization options - language.

For information on the Comments plugin, see: Comments plugin.

Export 0.1.0

The Export plugin is currently in Open Beta. To learn about our pre-release commitment, please read the software licence agreement related to your subscription, including:

A new Export plugin is available for beta testing and allows users to export content from the editor as a rasterized PDF.

This plugin will be available to all new and existing customers who have purchased a Tiny Cloud Essential Plan, Tiny Cloud Professional Plan, or Tiny Custom Plans.

For information on the Export plugin, see: Export plugin.

PowerPaste 5.3.3

The TinyMCE 5.5 release includes an accompanying release of the PowerPaste premium plugin.

PowerPaste 5.3.3 fixes missing bg_BG, eu, and id translations.

For information on the PowerPaste plugin, see: PowerPaste plugin.

Spell Checker Pro 2.1.0

The TinyMCE 5.5 release includes an accompanying release of the Spell Checker Pro premium plugin.

Spell Checker Pro 2.1.0 provides:

  • An updated the dialog to allow wider buttons for languages with longer strings by removing the Close button (Cancel button in TinyMCE 4).

  • Fixed the spellcheck_dialog button incorrectly rendering as a split button in TinyMCE 4.

For information on the Spell Checker Pro plugin, see: Spell Checker Pro plugin.

Tiny Skins and Icon Packs

The TinyMCE 5.5 release includes an accompanying release of the Tiny Skins and Icon Packs.

The following icon packs have been updated to include new icons for the line height (Line Height icon: Bidirectional arrow pointing up and down beside four horizontal) and export (Export icon: A page with an arrow from the center of the page to the right of the page) toolbar buttons:

  • Material

  • Small

  • Jam

  • Thin

For information on using the TinyMCE premium icon packs, see: Tiny Skins and Icon Packs - How to use an icon pack.

Minor changes for TinyMCE 5.5

TinyMCE 5.5 introduces the following minor changes:

  • Added the ability to remove images on a failed upload using the images_upload_handler failure callback.

  • Added table related oxide variables to the Style API for more granular control over table cell selection appearance.

  • Added new APIs to allow for programmatic control of the inline toolbar visibility.

  • Added the origin property to the ObjectResized and ObjectResizeStart events, to specify which handle the resize was performed on.

  • Changed the target property on fired events to use the native event target. The original target for an open shadow root can be obtained using event.getComposedPath().

  • Changed the editor to clean-up loaded CSS stylesheets when all editors using the stylesheet have been removed.

  • Changed how CSS manipulates table cells when selecting multiple cells to achieve a semi-transparent selection.

  • Deprecated the Env.experimentalShadowDom flag.

General bug fixes

TinyMCE 5.5 provides fixes for the following bugs:

  • Fixed tables with no borders displaying with the default border styles in the preview dialog.

  • Fixed loss of whitespace when inserting content after a non-breaking space.

  • Fixed the event.getComposedPath() function throwing an exception for events fired from the editor.

  • Fixed notifications not appearing when the editor is within a ShadowRoot.

  • Fixed focus issues with inline dialogs when the editor is within a ShadowRoot.

  • Fixed the template plugin previews missing some content styles.

  • Fixed the media plugin not saving the alternative source url in some situations.

  • Fixed an issue where column resizing using the resize bars was inconsistent between fixed and relative table widths.

  • Fixed an issue where dragging and dropping within a table would select table cells.

  • Fixed up and down keyboard navigation not working for inline contenteditable="false" elements.

  • Fixed dialog not retrieving close icon from icon pack.

  • Fixed the unlink toolbar button not working when selecting multiple links.

  • Fixed the link dialog not showing the "Text to display" field in some valid cases.

  • Fixed the DOMUtils.split() API incorrectly removing some content.

  • Fixed pressing the escape key not focusing the editor when using multiple toolbars.

  • Fixed the dirty flag not being correctly set during an AddUndo event.

  • Fixed editor.selection.setCursorLocation incorrectly placing the cursor outside pre elements in some circumstances.

  • Fixed an exception being thrown when pressing the enter key inside pre elements while br_in_pre setting is false.

Security fixes

Accessibility Checker 2.3.0 provides fixes for the following security issues:

  • Fixed a Cross-Site Scripting (XSS) vulnerability in the accessibility issue repair function.

Deprecated features

The following features have been deprecated with the release of TinyMCE 5.5:

The premium Spanish (Mexico) language pack has been deprecated

With the release of TinyMCE 5.5, the premium Spanish (Mexico) language pack (es_MX) has been deprecated and will not be updated in the future. The community-translated Spanish (Mexico) language pack is unaffected.

For information on the community maintained language packs, see: Localization options - language.

Known issues

This section describes issues that users of TinyMCE 5.5 may encounter, as well as possible workarounds for these issues.

Outline

Difficult to see table cell selections for table cells with a background color

Issue: Due to CSS changes related to table cell selections, it can be difficult to see the which cells are selected if the cells have a background color. This issue is both a usability and an accessibility issue.

Workaround: To improve the visibility of cell selections until this issue is fixed, use the content_style option to change the table-related cell selection style. For example:

tinymce.init({
  selector: 'textarea',
  plugins: 'table',
  content_style: '.mce-content-body td[data-mce-selected]::after, .mce-content-body th[data-mce-selected]::after { background-color: rgb(180, 215, 255, .7); }'
});

Tiny recommends removing this workaround from the configuration when the issue has been fixed.

Upgrading to the latest version of TinyMCE 5

The procedure for upgrading to the latest version of TinyMCE 5 depends on the deployment type.

Upgrading Tiny Cloud

Tiny Cloud provides the latest enterprise version of TinyMCE. For information on configuring Tiny Cloud, see: the Cloud deployment guide.

Upgrading TinyMCE Self-hosted manually

To upgrade to TinyMCE 5.10 using a manually downloaded package:

  1. Backup the tinymce/ directory so any customizations can be restored after the upgrade.

    Customizations for TinyMCE are typically stored in the following directories:

    tinymce/
├── icons/
├── langs/
├── plugins/
├── skins/
│   ├── content/
│   └── ui/
└── themes/

  2. Download the latest version of TinyMCE.

    • For the TinyMCE Community Version, download tinymce_<VERSION>.zip from Get TinyMCE - Self-hosted releases, where <VERSION> is the latest version of TinyMCE.

    • For the TinyMCE Enterprise Version, download the TinyMCE Enterprise Bundle from Tiny Account > Downloads. The downloaded file will be named enterprise_latest.zip.

  3. Extract the downloaded .zip file to a temporary location.

  4. (If required) Install the latest language packs from Get TinyMCE - Language Packages.

  5. Copy customizations to the new tinymce/ directory. Ensure that only custom changes are added the new tinymce/ directory, such as:

    • Custom icons packs

    • Custom plugins

    • Custom skins

    • Custom themes

  6. Delete the existing tinymce/ directory and replace with the new tinymce/.

To simplify the upgrade process to future versions of TinyMCE:

  1. Host the TinyMCE customizations outside of the tinymce/ directory.

  2. Update your TinyMCE configuration as required:

    • Set the location of content CSS customizations using content_css.

    • Set the location of custom plugins using external_plugins.

    • Set the location of custom icon packages using icons_url instead of icons.

    • Set the location of custom localization packages using language_url instead of language.

    • Set the location of custom skin packages using skin_url instead of skin.

    • Set the location of custom themes using theme_url instead of theme.