TinyMCE 5.4

Overview

TinyMCE 5.4 was released for TinyMCE Enterprise and Tiny Cloud on Thursday, July 23rd, 2020. It includes TinyMCE 5.4.1 and additional changes to premium plugins. These release notes provide an overview of the changes for TinyMCE 5.4, 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.4 new features and enhancements

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

Updates and additions to the Table plugin

The TinyMCE 5.4 release includes the following improvements for the table (table) plugin:

  • Adds: commands, APIs, and icons for; cut, copy, and paste columns.

  • Adds toolbar button icons for the cut, copy, and paste rows.

  • Adds a new mceTableApplyCellStyle command for applying selected styles to table cells.

  • Adds a new table_header_type option for setting the HTML structure used for table header rows.

  • Adds table row, column, and cell type commands and queries.

  • Adds a new table_sizing_mode option and a new mceTableSizingMode command for setting the method for measuring table cell width: fixed, relative, or responsive.

  • Extends the mceInsertTable command for adding tables without the dialog.

For information on the table plugin, see: Table plugin.

For a list of:

Icon identifiers are now case-insensitive

To simplify creating custom components and plugins, the icon look-up is now case-insensitive. This will assist with adding icons to custom toolbar buttons, menu sections, and menu items.

For list of icons provided with TinyMCE, see: Available icons.

For information on:

New option for blocking unsupported files from being drag and dropped into the editor

The block_unsupported_drop option blocks unsupported images and files from being dropped into the editor. This option is enabled by default. If this option is disabled (false), users can drop an unsupported file into the editor, which will cause the browser to navigate away from the page containing the editor.

For information on the block_unsupported_drop option, see: Image & file options - block_unsupported_drop.

Accompanying Premium Plugin changes

The following premium plugin updates were released alongside TinyMCE 5.4.

Advanced Code Editor 2.1.0

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

Advanced Code Editor 2.1.0 provides the following improvements:

  • Added search/replace support.

  • Fixed the editor referrer_policy option not working when loading additional resources.

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

PowerPaste 5.3.1

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

PowerPaste 5.3.1 provides the following improvements:

  • Fixed PowerPaste not able to load the wordimport.js resource when bundled.

  • Fixed the editor referrer_policy option not working when loading additional resources.

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

Accompanying Premium self-hosted server-side component changes

The TinyMCE 5.4 release includes accompanying changes affecting the TinyMCE self-hosted services for the following plugins:

  • The Enhanced Media Embed plugin (mediaembed)

  • The Image Tools plugin (imagetools)

  • The Link Checker plugin (linkchecker)

  • The Spell Checker Pro plugin (tinymcespellchecker)

The Java server-side components (ephox-spelling.war, ephox-hyperlinking.war, and ephox-image-proxy.war) have been updated to version 2.5.0.

This version requires Java 8 or higher. For information on the removal of Java 7 support, see: Removal of Java 7 support for TinyMCE 5.3 and later.

For information on:

Security update for self-hosted server-side components

Version 2.5.0 provides security updates for the Java-based server-side components. To deploy the updated version of the server-side components:

  1. Update your Java Application Server to the new minimum required version:

    • Eclipse Jetty 9.4 or later

    • Apache Tomcat:

      • 9 or later

      • 8.5.12+

      • 8.0.42+

      • 7.0.76+

  2. Replace the existing server-side .war files with the version 2.5.0 .war files bundled with TinyMCE 5.4 or later.

For information on:

Minor changes for TinyMCE 5.4

TinyMCE 5.4 introduces the following minor changes:

  • Added keyboard navigation support to menus and toolbars when the editor is in a ShadowRoot.

  • Added the ability for menus to be clicked when the editor is in an open shadow root.

  • Added the Editor.ui.styleSheetLoader API for loading stylesheets within the Document or ShadowRoot containing the editor UI.

  • Added the StyleSheetLoader module to the public API.

  • Added Oxide variables for styling the select element and headings in dialog content.

  • Added font related Oxide variables for secondary buttons, allowing for custom styling.

  • Changed advlist toolbar buttons to only show a dropdown list if there is more than one option.

  • Changed stylesheet loading, so that UI skin stylesheets can load in a ShadowRoot if required.

  • Changed the DOM location of menus so that they display correctly when the editor is in a ShadowRoot.

  • Changed the table plugin to correctly detect all valid header row structures.

General bug fixes

TinyMCE 5.4 provides fixes for the following bugs:

  • Fixed tables with no defined width being converted to a fixed width table when modifying the table.

  • Fixed the autosave isEmpty API incorrectly detecting non-empty content as empty.

  • Fixed table Paste row after and Paste row before menu items not disabled when nothing was available to paste.

  • Fixed a selection performance issue with large tables on Microsoft Internet Explorer and Edge.

  • Fixed filters for screening commands from the undo stack to be case-insensitive.

  • Fixed fullscreen plugin now removes all classes when the editor is closed.

  • Fixed handling of mixed-case icon identifiers (names) for UI elements.

  • Fixed leading and trailing spaces lost when using editor.selection.getContent({ format: 'text' }).

  • Fixed an issue where changing the URL with the quicklink toolbar caused unexpected undo behavior.

  • Fixed an issue where removing formatting within a table cell would cause Internet Explorer 11 to scroll to the end of the table.

  • Fixed an issue where the allow_html_data_urls setting was not correctly applied.

  • Fixed the autolink feature so that it no longer treats a string with multiple "@" characters as an email address.

  • Fixed an issue where removing the editor would leave unexpected attributes on the target element.

  • Fixed the link plugin now suggest mailto: when the text contains an '@' and no slashes (/).

  • Fixed the valid_children check of custom elements now allows a wider range of characters in names.

  • Fixed the Search and Replace plugin incorrectly including zero-width caret characters in search results.

  • Fixed dragging and dropping unsupported files navigating the browser away from the editor.

  • Fixed undo levels not created on browser handled drop or paste events.

  • Fixed Oxide checklist styles not showing when printing.

  • Fixed bug with scope attribute not being added to the cells of header rows.

Security fixes

TinyMCE 5.4 provides fixes for the following security issues:

  • Fixed content in an iframe element parsing as DOM elements instead of text content.

Deprecated features

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

The free TinyMCE Spell Checker plugin

The free TinyMCE Spell Checker plugin (spellchecker) has been deprecated and will be removed in a future major release of TinyMCE. This includes both the editor plugin and the PHP backend program.

This change does not affect:

To develop and maintain a new spellchecking plugin based on the free TinyMCE Spell Checker plugin:

The table_responsive_width option

The table_responsive_width option has been deprecated with the release of TinyMCE 5.4. This option has been replaced by table_sizing_mode.

Known issues

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

Outline

Top and bottom editor anchors appear in links autocomplete list when disabled

Issue

This issue affects the following options:

  • anchor_top

  • anchor_bottom

When these options are set to false, the relevant anchors should not appear as autocomplete options in the link dialog. These anchors will appear in the autocomplete list when these options are set to false in TinyMCE 5.4.0 and TinyMCE 5.4.1.

For information on:

Workaround

To disable all autocomplete/typeahead URLs in the link dialog, set the typeahead_urls option to false.

For example:

tinymce.init({
  selector: 'textarea',
  typeahead_urls: false
});

For information on the typeahead_urls option, see: Advanced editing behaviors - typeahead_urls.

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.