TinyMCE 6.0: Premium changes

TinyMCE 6.0 Premium Plugins are not backwards compatible

No Premium Plugins released with TinyMCE 6.0 are backwards compatible with earlier versions of TinyMCE.

Premium Plugin components we renamed

Old name New name Element Notes

formatpainter_blacklisted_formats

formatpainter_ignored_formats

Option

imagetools

editimage

Plugin

NB: Image Tools is now Enhanced Image Editing, a Premium plugin.

imagetools_toolbar

editimage_toolbar

Option

NB: Image Tools is now Enhanced Image Editing, a Premium plugin.

imagetools_proxy

editimage_proxy

Option

NB: Image Tools is now Enhanced Image Editing, a Premium plugin.

imagetools_cors_hosts

editimage_cors_hosts

Option

NB: Image Tools is now Enhanced Image Editing, a Premium plugin.

imagetools_credentials_hosts

editimage_credentials_hosts

Option

NB: Image Tools is now Enhanced Image Editing, a Premium plugin.

imagetools_fetch_image

editimage_fetch_image

Option

NB: Image Tools is now Enhanced Image Editing, a Premium plugin.

images_upload_timeout

editimage_upload_timeout

Option

NB: Image Tools is now Enhanced Image Editing, a Premium plugin.

toc

tableofcontents

Plugin, Menu item, and Toolbar item

This presents in both the menu item and the toolbar’s tooltip text. NB: Table of Contents is now a Premium plugin.

tocupdate

tableofcontentsupdate

Toolbar item

This presents in the toolbar’s tooltip text. NB: Table of Contents is now a Premium plugin.

toc_class

tableofcontents_class

Option

NB: Table of Contents is now a Premium plugin.

toc_depth

tableofcontents_depth

Option

NB: Table of Contents is now a Premium plugin.

toc_header

tableofcontents_header

Option

NB: Table of Contents is now a Premium plugin.

Hindi, Malay, and Vietnamese translations added to Premium Plugins

The following Premium Plugins now present in Hindi, Malay, and Vietnamese:

Title case corrected in Premium Plugin UI elements

Previously, buttons, dialog fields, and menu items in the following Premium Plugins were presented in title case:

As of this update, these UI elements in these Plugins present in standard sentence case.

Accompanying Premium Plugin changes

The following premium plugin updates were released alongside TinyMCE 6.0.

Accessibility Checker

The following change was made to the Accessibility Checker plugin:

The default value for a11ychecker_html_version was html4.

It is now html5.

Advanced Tables

The following changes and fixes were made to the Advanced Tables plugin:

With all table logic, except table UI components, now part of core TinyMCE editor, the advtable plugin now only requires the table plugin be enabled to use the Advanced Table-specific toolbar buttons and menu items.

Previously, the getRowType() method of the series generator info argument incorrectly returned header when a tfoot row contained only header cells.

With this update, getRowType() correctly returns footer when a tfoot row contains only header cells.

Previously tables containing a colgroup did not sort correctly. As of this release, this error has been corrected: tables with a colgroup now sort correctly, as expected.

Comments

The following changes and fixes were applied to the Comments plugin:

Because of how a comment’s active state was captured when the comment was made active, this active state was not excluded when capturing editor content from a comment.

With this release, a comment’s active state is captured differently and, consequently, this state is excluded when comment content is captured.

Previously, every time the insertion point was placed within an extant comment and then placed anywhere outside of the comment body, an undo level was added. That is, every time focus was switched either to or from a content, an undo level was added.

With this update, shifting focus to or from a comment no longer adds undo levels, as expected.

Previously, the Comments plugin’s scroll position logic lead to, in some edge cases, the last comment not scrolling into view correctly.

The logic has been corrected and, with this update, all comments scroll into view as expected.

Previously, when a Comment was added to a TinyMCE instance, the data in tinycomments was automatically, and incorrectly, added to editor.selection.getContent().

This caused that same data to appear in dialogs such as the Find and Replace Find text-entry input field and the Insert Link text-entry input field.

Typically, the added data was the content selected before adding the comment. Selecting any or all the contents of a TinyMCE instance was not, however, necessary for this bug to present. Adding a comment to a TinyMCE instance automatically adds data to tinycomments regardless of whether there is selected content in the TinyMCE instance.

With this update, adding a comment still adds data to tinycomments but that data is no longer passed to editor.selection.getContent(), which prevents it being automatically added to dialogs such as the Find and Replace Find text-entry input field.

Enhanced Image Editing (was Image Tools)

The following changes were made to the Enhanced Image Editing plugin:

As noted in the TinyMCE 6.0 Release Notes, the imagetools plugin is no longer included as part of the Free editor.

Image Tools is now Enhanced Image Editing, a Premium plugin.

The imagetools_proxy option has been renamed to editimage_proxy. However, when setting up Tiny services the recommended configuration is now editimage_proxy_service_url and will be used in favour of editimage_proxy if both are set.

Users of the Free version of TinyMCE 5.x who rely on the removed imagetools plugin should not upgrade to TinyMCE 6.0 without a subscription plan that provides access to Enhanced Image Editing.

Enhanced Media Embed

The following change was made to the Enhanced Media Embed plugin:

In earlier versions of the TinyMCE, the forced_root_block option took the value false.

This value was previously deprecated and, with this release, support for false as a forced_root_block value has been removed from the Enhanced Media Embed plugin.

Export

The following improvement was made to the Export plugin:

A new export_image_proxy_service_url option is available for use with the proxy service provided by Tiny services.

Format Painter

The following improvement and following change were made to the Format Painter plugin:

A formatpainter menu item was added to match the toolbar button.

The formatpainter_blacklisted_formats option was re-named to formatpainter_ignored_formats.

Mentions

The following change was made to the Mentions plugin:

The getUsers API was removed.

View the following demo for an alternative to the getUsers API:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="getusers-api-alternative">
<p>The deprecated <code>getUsers</code> API would return an array of currently mentioned names which were mentioned since loading the editor.</p>
<p>Add some mentions to the content by typing "@a...", then click the <strong>getUsers</strong> button in the toolbar to insert a list of names which have been mentioned.</p>

<br><br><br>

<h2>Found a bug?</h2>

<p>If you believe 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 <a href="http://www.plupload.com" target="_blank">Plupload</a>, the upload solution featuring HTML5 upload support.</p>
<p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
<p>All the best from the TinyMCE team.</p>
</textarea>
const users = [
  { id: 'user-1', name: 'Angelina Winn' },
  { id: 'user-2', name: 'Rodrigo Hawkins' },
  { id: 'user-3', name: 'Dianna Smiley' },
  { id: 'user-4', name: 'Eliana Stout' },
  { id: 'user-5', name: 'Oscar Khan' },
  { id: 'user-6', name: 'Mariana Dickey' },
  { id: 'user-7', name: 'Jakoby Roman' },
  { id: 'user-8', name: 'Grace Gross' },
  { id: 'user-9', name: 'Muhammed Sizemore' },
  { id: 'user-10', name: 'Kathryn Mcgee' },
];

const fetchMentions = (query, success) => {
  const matches = users.filter((user) => user.name.toLowerCase().includes(query.term.toLowerCase()));
  success(matches);
};

const insertedUsers = new Set();

const mentionsInsert = (editor, user) => {
  const span = editor.getDoc().createElement('span');
  span.className = 'mention';
  span.appendChild(editor.getDoc().createTextNode('@' + user.name));
  insertedUsers.add(user);
  return span;
};

const getUsers = (editor) => {
  const spans = Array.from(editor.getBody().querySelectorAll('[data-mce-mentions-id]'));
  const currentIds = spans.map((elm) => elm.getAttribute('data-mce-mentions-id'));
  const currentUsers = Array.from(insertedUsers).filter((user) => currentIds.includes(user.id));

  return currentUsers;
};

tinymce.init({
  selector: "textarea#getusers-api-alternative",
  plugins: "mentions code",
  mentions_fetch: fetchMentions,
  mentions_menu_complete: mentionsInsert,

  toolbar: 'getUsersButton',
  setup: function (editor) {
	editor.ui.registry.addButton('getUsersButton', {
	  text: 'getUsers',
	  onAction: function () {
		// Get mentioned users
		var mentionedUsers = getUsers(editor);
    // Insert mentioned users as a bullet list
		if (mentionedUsers.length > 0) {
		  var userList = mentionedUsers.map((user) => '<li>' + user.name + '</li>').join('');
		  editor.execCommand('mceInsertContent', false, '<ul>' + userList + '</ul>');
		}
	  }
	});
  }
});

PowerPaste

As noted in the TinyMCE 6.0 Release Notes, the paste plugin’s functionality is no longer provided as a plugin. It is now a core part of TinyMCE 6.0.

Because the functionality was unmaintainable, however, paste no longer supports input from Microsoft Word.

The Premium plugin, PowerPaste provides the capability to accept data from Microsoft Word and Microsoft Excel, and clean-up the received data before pasting it into place.

For this release, the following fixes and changes were also incorporated into the PowerPaste plugin:

Previously, when dragging content from outside the editor to inside the editor the pointer did not move with the dragged content as expected.

With this update, dragging content behaves correctly: the TinyMCE editor takes focus when the drag enters a the pointer follows the dragged content.

As well, content dragged and dropped into the TinyMCE editor is now cleaned or merged using the same logic as when content is pasted in.

Finally, pasting content from Microsoft Word that included a style block ≥ 1.4 Mb previously triggered a stack overflow.

With this release, such content can be pasted in to a TinyMCE editor with PowerPaste enabled without issue.

In conjunction with these PowerPaste changes, three changes were made to paste:

  1. A paste default has changed. The paste_data_images option now defaults to true.

    When paste was a plugin, this option was, by default, set to false, which prevented images being pasted from the local machine.

  2. The mceInsertClipboardContent argument, content, has been renamed to html.

    The new name is a more accurate reflection of what sort of data the argument passes.

    The content argument can no longer be used with mceInsertClipboardContent. If content is used, no data is passed. mceInsertClipboardContent only attempts to pass data if the html or text property is used.

  3. The, now built-in, paste functionality no longer supports pasting from Microsoft Word.

    There is an open request for maintainers should someone in the community be interested in taking over maintenance of this particular functionality as a separate plugin.
    If a community-maintained version of the paste plugin becomes available, we will link to it from the Migration Guide.

Real-time Collaboration

The following improvements, changes, and fixes were made to the Real-time Collaboration plugin:

Three additional options are now supported when Real-time Collaboration is active:

  • valid_elements

  • valid_children

  • extended_valid_elements

Real-time Collaboration now supports the autocompleter API.

Real-time Collaboration now supports the inline_boundaries option.

When provided values are incorrect, the returned error messages are now less opaque.

For example, the error message 'key' was not a string is now the error message Expected field 'key'.

Previously, if a TinyMCE editor instance with Real-time Collaboration loaded also contained a Horizontal Rule (ie an <hr> element), attempting to move the insertion point over the Horizontal Rule using arrow keys threw an exception: Uncaught Error: Unsupported node type: [object DocumentType].

With this update, moving the insertion point through a Horizontal Rule using arrow keys works as expected: the insertion point moves and no exception is thrown.

Previously, attempting to remove failed image uploads with the images_upload_handler API failed if Real-time Collaboration was loaded.

With this update, images_upload_handler removes failed image uploads and presents the correct alert message.

Keyboard events can now be prevented before the Real-time Collaboration plugin intercepts them.

Previously, selecting linked images when the link_context_toolbar option was enabled, caused the Real-time Collaboration editor to enter an endless loop. This loop caused the selected images to flicker.

With this update, the Real-time Collaboration editor no longer enters an endless loop when linked images are selected. Consequenlty, the selected images no longer flicker.

Spell Checker Pro

The following fixes were made to the Spell Checker Pro plugin:

Previously, Spell Checker Pro treated soft hyphens (ie the &shy; html entity) as a word boundary. As a consequence words containing soft hyphens were not correctly spellchecked as whole words.

With this update, the &shy; entity is correctly recognised as part of a word, not a word boundary. And words containing soft hyphens are, consequently, spell checked correctly.

As well, one command and one option have been replaced and a, previously deprecated, fallback option has been removed.

Removed item Replacement Element type

mceSpellcheckDocument

mceSpellcheckDialog

Command

spellchecker_select_languages

content_langs

Option

spellchecker_whitelist

spellchecker_ignore_list

Option

Table of Contents

The following changes were made to the Table of Contents plugin:

As noted in the TinyMCE 6.0 Release Notes, the toc plugin is no longer part of the Core editor.

Table of Contents has been updated and is now a Premium plugin.

Users of the Free version of TinyMCE 5.x who rely on the, now deprecated and removed, toc plugin, should not upgrade to TinyMCE 6.0 without a subscription plan that provides access to Premium plugins such as Table of Contents.

The new Premium tableofcontents plugin also changes the names of several elements.

Old name New name

Element type

toc

tableofcontents

Plugin, Menu item, and Toolbar item

tocupdate

tableofcontentsupdate

Toolbar item

toc_class

tableofcontents_class

Option

toc_depth

tableofcontents_depth

Option

toc_header

tableofcontents_header

Option

Any configurations or logic that use the old element names must be updated to the new names after upgrading to TinyMCE 6.0 and installing the new tableofcontents plugin.

Tiny Drive

The following improvements, changes, and fixes were made to the Tiny Drive plugin:

Tiny Drive supports several new file formats:

Tiny Drive now recognises files using the following filename extensions as JPEG files:

  • .jpe

  • .jfi

  • .jif,

  • .jfif,

  • .pjpeg,

  • .pjp

When the Starred filter is used, move and copy are now removed from the actions menu.

They are not needed and removing them from the menu obviates a file-moving error.

The third-party PDF renderer used by Tiny Drive, PDFjs has been updated to the most recent version.

When Tiny Drive cannot preview a file, it displays a generic file-type icon.

With this release, a text message — No preview available — is also displayed.

Previously, everytime Tiny Drive was opened, the CSS used to present the Tiny Drive instance was re-loaded.

With this release, a check has been added. Tiny Drive’s CSS is now loaded once, when it is first opened, and uses the already loaded CSS on subsequent openings.

Icons presented in the Upload file and Upload/Create menus were inconsistent: some presenting as black and some presenting as white.

This has been corrected: these icons now all present as black or white as expected.

When the TinyMCE toolbar is visible but the viewport is narrow, the toolbar, or parts of the toolbar, are collapsed into an overflow menu (denoted with a mid-line horizontal ellipsis: ⋯).

In some circumstances, when Tiny Drive was loaded and the overflow menu was opened, clicking outside the resulting displayed menu did not close the menu.

With this update, clicking outside this menu closes it, as expected.

When a file available in Tiny Drive both had an attached Star and was presented in the Preview view, choosing Unstar from the Preview view’s overflow menu did not change the file’s Star state.

With this update, files with Stars that are Unstarred from the Preview view have the star removed, as expected.

Similarly, when a file available in Tiny Drive was presented in the Preview view, choosing Rename from the overflow menu, entering a new name, and clicking Submit, did not change the file’s name.

With this update, files with Stars that are re-named from the Preview view update the filename, as expected.

Accompanying Premium Skins and Icon Packs changes

The TinyMCE 6.0 release includes an accompanying release of the Premium Skins and Icon Packs.

For information on using premium skins and icon packs, see: Premium Skins and Icon Packs.

Accompanying Premium self-hosted server-side component changes

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

  • Enhanced Media Embed plugin (mediaembed)

  • Export plugin (export)

  • Enhanced Image Editing plugin (editimage)

  • Link Checker plugin (linkchecker)

  • Spell Checker Pro plugin (tinymcespellchecker)

The Java server-side components have been updated to the following versions:

  • ephox-hyperlinking.war: 2.105.9

  • ephox-image-proxy.war: 2.106.1

  • ephox-spelling.war: 2.118.4

For information on:

Updating the self-hosted server-side components

The new versions of the server-side services provide 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 minimum required version:

    • Eclipse Jetty:

      • 9.4+

    • WebSphere Application Server (WAS) 8 or later

    • Apache Tomcat:

      • 10 (See note below)

      • 9+

      • 8.5.12+

      • 8.0.42+

      • 7.0.76+

      Tomcat 10 will require WAR files to be placed in the webapp-javaee directory rather than the webapps directory due to the change to Jakarta servlets. Jetty 11 is not currently supported due to this change.

  1. Replace the existing server-side .war files with the .war files bundled with TinyMCE 6.0 or later.

For information on: