TinyMCE 6.2

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

Overview

TinyMCE 6.2 was released for TinyMCE Enterprise and Tiny Cloud on Monday, September 26th, 2022. It includes TinyMCE 6.2, additional changes to Premium plugins, and several new Premium plugins. These release notes provide an overview of the changes for TinyMCE 6.2:

New Premium plugins

Footnotes 1.0.0

The TinyMCE 6.2 release includes the new Footnotes premium plugin.

The Footnotes plugin allows the user to add footnotes to TinyMCE documents.

For information on the Footnotes plugin, see: Footnotes.

Merge Tags 1.0.0

The TinyMCE 6.2 release includes the new Merge Tags premium plugin.

The Merge Tags plugin allows the user to insert merge tags (also known as personalization tokens, or as mail merge fields) into TinyMCE documents.

For information on the Merge Tags plugin, see: Merge Tags.

Spelling Autocorrect 1.0.0

The TinyMCE 6.2 release includes the new Autocorrect premium plugin.

The Spelling Autocorrect plugin allows TinyMCE to autocorrect a specified set of spelling errors, common typos, and capitalization errors, as they are being typed.

For information on the Spelling Autocorrect plugin, see: Spelling Autocorrect.

Accompanying Premium Plugin changes

The following premium plugin updates were released alongside TinyMCE 6.2.

Enhanced Media Embed 3.0.4

The TinyMCE 6.2 release includes an accompanying release of the Enhanced Media Embed premium plugin.

Enhanced Media Embed 3.0.4 fixes the following bug:

Previously, embedded audio objects became invisible when a left or right alignment was applied.

With this update all audio objects are set to min-width: 100px and now continue to show in TinyMCE documents when aligned left or right.

For information on the Enhanced Media Embed plugin, see: Enhanced Media Embed.

Permanent Pen 2.0.2

The TinyMCE 6.2 release includes an accompanying release of the Permanent Pen premium plugin.

Permanent Pen 2.0.2 fixes the following bug:

Previously, if Permanent Pen was switched off (by, for example, clicking the Permanent Pen button in the toolbar so the button toggles from highlighted to not-highlighed) and the next user-action was to press the Enter or Return key, Permanent Pen did not turn off as expected.

This update improves Permanent Pen’s activate and deactivate mechanism. When the plugin is switched off and the next user-action is to press either Enter or Return, Permanent Pen stays switched off.

For information on the Permanent Pen plugin, see: Permanent Pen.

PowerPaste 6.1.1

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

PowerPaste 6.1.1 fixes the following bug:

The wordimport.js resource file was difficult to bundle when using Webpack 5.

With this update, bundling is not as difficult.

For information on the PowerPaste plugin, see: PowerPaste.

Real-Time Collaboration 2.1.1

The TinyMCE 6.2 release includes an accompanying release of the Real-Time Collaboration premium plugin.

Real-Time Collaboration 2.1.1 fixes the following bug:

The Real-Time Collaboration plugin checks that parameters used to set the token provider, among other settings, are valid Promises.

However, Angular code wraps promises into ZoneAwarePromises. These fail said validation, throwing an expected it to return a promise error.

With this update, providers now accept any object that has then and catch functions as compatible with promise-like objects.

For information on the Real-Time Collaboration plugin, see: Real-Time Collaboration.

Spell Checker Pro 3.1.0

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

Spell Checker Pro 3.1.0 adds one change and fixes two bugs:

The SpellcheckerLanguageChanged event is now dispatched at plugin initialization

Spell Checker Pro now fires the SpellcheckerLanguageChanged event when it is initialized, making the language Spell Checker Pro has been configured to use available for querying.

This enables other plugins to check for the currently configured language.

In some specific cases, copying and pasting in tables did not work as expected due to Spell Checker Pro incorrectly moving the selection

In some circumstances, Spell Checker Pro would silently, and incorrectly, extend a selection. When the extended selection was then copied-and-pasted, unexpected results occurred.

For example, in some circumstances the selection appeared to be the contents of a single table cell, but Spell Checker Pro incorrectly extended the selection to include an HTML markup element outside the table. When this was pasted, the incorrectly added element made the paste behave incorrectly.

With this update, the way elements are traversed when selections are being made has been changed. Consequently, incorrect selection extension no longer occurs, and copying-and-pasting content from tables works as expected.

Spellchecking incorrectly triggered on all change events

Spell Checker Pro should trigger on any paste event, whether the event comes from a plugin (such as Paste or PowerPaste) or a native browser action. Previously, however, Spell Checker Pro was listening to the wrong event — the change event — to cover this case.

As a consequence, Spell Checker Pro triggered on all change events.

With this update, Spell Checker Pro now listens for input events and only triggers when content is inserted into a TinyMCE document.

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

Accompanying Premium Skins and Icon Packs changes

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

Premium Skins and Icon Packs

The Premium Skins and Icon Packs release includes the following updates:

Two new icons were added to all icon packs: addtag and footnote.

The Premium Skins and Icon Packs were rebuilt to pull in the changes also incorporated into the default TinyMCE 6.2 skin, Oxide.

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.2 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)

  • Spelling Autocorrect plugin (autocorrect)

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

  • ephox-hyperlinking.war: 2.105.13

  • ephox-image-proxy.war: 2.106.4

  • ephox-spelling.war: 2.118.6

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.
  2. Replace the existing server-side .war files with the .war files bundled with TinyMCE vnumtxt or later.

For information on:

Improvements

TinyMCE 6.2 also includes the following improvements:

Formatting can now be applied to an element that has a contenteditable="false" attribute

Elements with contenteditable="false" attributes can now have formatting applied to them that wraps the element.

For example, such elements can now be set to bold or italic. As well, such elements can have their font and font-size changed.

This new capability is configurable using the new format_noneditable_selector option.

For details see Content Formatting.

The autocompleter now supports a multiple character trigger using the new trigger configuration

Previously, the autocompleter used the ch configuration property to set a single character trigger.

This property has been deprecated and will be removed in the next major release.

The trigger configuration property should be used instead. It allows one or more characters to be specified as a trigger.

trigger: '<string>',

The new Merge Tags Premium plugin, for example, uses the trigger property to set the {{ string as its default trigger.

For details see the Autocompleter UI component.

Some inline formatting, such as color and font size, can now be applied to list item elements

In TinyMCE 6.2 list bullets and list numbers can be inline formatted.

If the contents of a list item are selected and inline formatting is applied — such as a change of color or change of font-size — this spot-formatting is also applied to the list item’s associated bullet or number.

For more information see the Inline formatting of list elements documentation.

Alignment can now be applied to more embedded media element types

Embedded media elements could not, previously, be set to left, right, or center alignment.

With this update they can. Selecting an embedded media element and clicking the left, right, or center alignment toolbar buttons, or selecting the appropriate option from the Format > Align sub-menu, sets the element to the chosen alignment.

Additions

TinyMCE 6.2 also includes the following additions:

A new text_patterns_lookup option to provide additional text patterns dynamically

TinyMCE 6.2 includes a new text_patterns_lookup option.

This option allows the specification of a function that dynamically appends additional text patterns to the default text_patterns.

The function takes a context object as an argument and returns an array of text patterns. This function is called whenever the editor triggers text pattern matching.

For details see Content Behavior Options.

A new promotion element has been added to the default UI

TinyMCE 6.2 includes an Upgrade promotion button. It appears in the unused corner of the TinyMCE menu bar.

It can be disabled using the new promotion option.

For more information see Premium upgrade promotion option.

New format_noneditable_selector option to specify the contenteditable="false" elements that can be wrapped in a format

Elements with contenteditable="false" attributes can now have formatting applied to them.

And this new capability is configurable using the new format_noneditable_selector option.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  format_noneditable_selector: 'span,p.special'
});

For details see Content Formatting.

Added allow as a valid attribute for the iframe element in the editor schema

Previously, the allow attribute was not considered a valid attribute for iframe elements in the TinyMCE schema. It now is.

When a TinyMCE editor with an allow attribute —

<iframe allow="fullscreen" style="width: 200px; height: 200px; border: 1px solid blue"></iframe>

— is initialized, the allow attribute will still be present in the rendered iframe element.

Menu toolbar buttons, buttons on the TinyMCE toolbar that show a menu when clicked, can now present a search field at the top of the menu.

The button refetches items as the search field is updated.

The new Merge Tags Premium plugin includes a menu toolbar button with this new search field.

Changes

TinyMCE 6.2 also incorporates the following changes:

The @menubar-row-separator-color oxide variable no longer affects the divider between the menu bar and Toolbar

Testing revealed circumstances in which an unnecessary border was added under the TinyMCE menu bar.

This update includes changes to the @menubar-row-separator-color oxide variable. It now only controls the color of the separator lines drawn in multiline Menu bars.

Consequently, unnecessary borders are no longer added under the TinyMCE menu bar.

The @toolbar-separator-color oxide variable now affects the color of the separator between the menu bar and Toolbar only

In concert with the testing above that discovered an unnecessary border occasionally being added under the TinyMCE menu bar, the @toolbar-separator-color oxide variable was also changed.

This variable now only affects the color of the separator between the TinyMCE menu bar and the TinyMCE Toolbar.

Available Premium plugins, which are listed by name in the Help dialog, are no longer translated

Previously, when TinyMCE was running in a language other than English, and the Help > Help dialog was invoked, and the Plugins list was selected, some available Premium plugin names were presented in translation.

With this update no Premium plugin names are translated. The Premium plugin names list is presented in English-language alphabetical order regardless of the language TinyMCE is running.

Bug fixes

The most common cause of text fragmentation is the Spell Checker Pro plugin, which fragments text nodes as part of its normal workings.

Previously, however, when text nodes were fragmented, the Autolink plugin’s URL text detection did not work.

This presented as, for example, FQDN strings such as www.example.com not being converted into a link.

In TinyMCE 6.2, the Autolink plugin is now able to handle this text node fragmentation and correctly converts URL-like strings such as FQDNs into a clickable link.

Fixed multiple incorrect types on public APIs found while enabling TypeScript strict mode

As part of switching to TypeScript’s strict mode, multiple public TinyMCE APIs were found to be typed incorrectly.

These types have been corrected types in TinyMCE 6.2.

The number of blank lines returned from editor.getContent({format: 'text'}) differed between browsers

In some browsers, blank lines in a TinyMCE document were being returned as plain text by editor.getContent({format: 'text'}) with a different number of newlines — \n — than expected.

For example, if the underlying HTML was

<p>line-1</p>
<p> </p>
<p>line-2</p>

editor.getContent({format: 'text'}) could, depending on the host browser, return

line-1\n\n\n\n\nline-2

This is one more newline character than expected.

There were two related causes for this behavior: an attribute not being assigned to a <br> tag when required, and TinyMCE not removing unnecessary elements when parsing the content.

For this update, both these causes have been corrected, and the number of newlines returned as plain text by editor.getContent({format: 'text'}) is the number expected.

The editor focused via the auto_focus option was not scrolled into the viewport

Previously, when a TinyMCE editor was not in view and was set to auto focus, the editor was focused but did not scroll into view in some browsers.

With this update, when auto focus is set, the editor is focused and scrolled into view even when the editor is outside the viewport, no matter the host browser.

Adding spaces immediately after a <span> containing a contenteditable="false" attribute did not work properly in some circumstances

Previously, pressing the Space bar when the insertion point was immediately after a span containing a contenteditable="false" attribute did not consistently insert a space.

This was known to occur on Mozilla Firefox and Google Chrome and was consequent to issues related to insertion point movement and non-breaking spaces.

TinyMCE 6.2 deals with these issues and typing a space immediately after a block with a contenteditable="false" attribute now adds that space, as expected.

Elements with only data-* custom attributes were sometimes removed when they should not be removed

Previously, when removing formatting from content that had elements with only custom data attributes, those elements could be incorrectly removed as part of the remove formatting operation.

For this update the remove formatting logic was changed. In TinyMCE 6.2 all non-TinyMCE specific or non-TinyMCE internal data-* custom attributes are considered content that must be preserved.

Previously, when inserting an image with a caption, the image plugin created a figure element. However, the link plugin treated the figure element as a link, even when the image caption did not contain a link.

This caused the link toolbar button to, incorrectly, highlight.

As of this update, the link plugin does not treat images with captions as links when the image caption does not contain a link. And the link toolbar no longer highlights incorrectly.

Specifying a single, non-default list style for the advlist_bullet_styles and advlist_number_styles options was not respected

Previously, when a single, non-default, list style for the advlist_bullet_styles and advlist_number_styles options was set, pressing the bullist and numlist toolbar buttons still applied a default list style.

This has been corrected and, with this update, TinyMCE behaves as expected.

Pressing a list toolbar button when a single, non-default list style is set now applies the list style correctly.

Fixed multiple issues that occurred when formatting elements with contenteditable attributes

For this update, the formatting logic has been refactored to improve the handling of elements containing contenteditable=”false” and contenteditable=”true” attributes.

In particular, this includes ensuring that formatting is not directly removed from elements with contenteditable=”false” attributes when merging duplicate or similar formatting between parent, sibling and child elements.

Spaces could be incorrectly added to urlinput dialog components in certain cases

The handling of spaces inserted into the UrlInput dialog component, specifically its implementation in the Link Dialog, was inconsistent.

It allowed spaces to be entered when it was empty and the text input contained text, but did not allow spaces to be entered when both fields were empty.

In TinyMCE 6.2, the UrlInput dialog component no longer allows leading or trailing spaces. Only spaces within other text content are now allowed.

The text patterns logic threw an error when there were fragmented text nodes in a paragraph

Previously, pressing Enter or Return to trigger an inline replacement text pattern could, in certain circumstances, throw an error to the console.

> tinymce.min.js:9 Uncaught DOMException: Failed to execute 'setEnd' on 'Range'

The example above is browser-specific. The exact error message will not be the same in all browsers.

For this update the text pattern logic was improved to handle these cases and these console errors are no longer thrown.

Dragging a contentEditable=false element towards a document’s edge did not cause scrolling

Previously, when an element with a contenteditable=false attribute was dragged towards the document’s edge, the drag did not cause scrolling. This meant such elements could only be dropped within the current viewport.

When dragging other elements (such as an image), as the dragged element approaches the edge of the document, TinyMCE starts scrolling, allowing these other elements to be dropped anywhere in the document.

With this update, dragging an element with a contenteditable=false attribute towards the document edge triggers scrolling, allowing for dropping the element anywhere in the document.

In TinyMCE 6.2, dragging elements with contenteditable=false attributes now results in the same behavior as dragging other draggable elements.

Parsing large documents no longer throws a Maximum call stack size exceeded exception

Previously, parsing very large documents would throw an error to the console that they had exceeded the Maximum call stack size.

For example:

tinymce.min.js:9 Uncaught RangeError: Maximum call stack size exceeded
    at tinymce.min.js:9:144118
    at zp (tinymce.min.js:9:143461)
    at zp (tinymce.min.js:9:143480)
    at zp (tinymce.min.js:9:143507)
    at zp (tinymce.min.js:9:143507)

The TinyMCE 6.2 parsing logic was updated and TinyMCE can now handle large documents without throwing this error.

DomParser filter matching was not checked between filters, which could lead to an exception in the parser

When inserting content, each node has their attributes run through a number of filters.

By default, only the filters within TinyMCE are run. Users are, however, able to add their own filters to run before any TinyMCE filters, using the DomParser API.

Previously, this node filter function did not check whether the next filter was still valid for all nodes. This meant the TinyMCE filters naively assumed that each attribute would be available for each filter.

This situation, which did not occur by default, could, when using a custom filter, potentially remove a necessary attribute for the next filter. This resulted in a console error.

This has been fixed in TinyMCE 6.2 by checking that each filter is still valid with the current attributes before running that filter.

Fixed contenteditable="false" lists and contenteditable="true" list elements issues

Previously, lists with contenteditable="false" attributes could be toggled and updated. And, within those lists, list elements with contenteditable="true" attributes could be indented, split into another list element, or appended to the previous list element by deletion.

Neither behavior was correct and, as of TinyMCE 6.2, this has been corrected.

In TinyMCE 6.2, list functionality in this regard is dependent on the state of the closest inheritable contenteditable attribute.

If a list has a contenteditable attribute value of its own, this is, of course the closest ‘inheritable’ attribute, and the list and its child elements take that value.

If a list does not have a contenteditable attribute value of its own and the immediate parent of the list is a div which does have a contenteditable attribute set, the list will inherit the value of this attribute.

However, if the list has a contenteditable attribute value of its own it will take this value rather than the value of the parent div.

Likewise, if a child element of a list (for example, an <li>) has a contenteditable attribute value of its own, it will take this value rather than the value of any parent element.

Removed extra bottom padding in the context toolbar of the TinyMCE 5 skin

In TinyMCE 6.0, extra padding was added to the context toolbar and, consequently, separator lines were incorrectly drawn on multi-line toolbars when using either the tinymce-5 skin or premium skins.

With this update the extra padding was removed and separator lines in TinyMCE 6.2 multi-line toolbars are drawn correctly.

Fixed a regression where pressing Enter added or deleted content outside the selection

A regression found in TinyMCE 6.0 caused inline elements with contenteditable="false" attributes to be incorrectly removed when Enter or Return were pressed on a selection which began before, and entered into, the block containing the element.

This regression was fixed in TinyMCE 6.2 and pressing Enter or Return in this circumstance no longer incorrectly removes these elements.

Fixed a regression where pressing Enter deleted selected contenteditable="false" <pre> elements

A regression found in TinyMCE 6.0 caused preformatted elements with contenteditable="false" attributes to incorrectly insert a newline when Enter or Return were pressed.

This regression was fixed in TinyMCE 6.2 and pressing Enter or Return no longer inserts an erroneous newline.

The editor.insertContent() API did not respect the no_events argument

If, for example, editor.insertContent('<p>test</p>', { no_events: true }); was run, BeforeSetContent and SetContent events were still fired, despite no_events being set to true.

With this update, the API respects the no_events: true property. Adding content to a TinyMCE document with no_events set to true now adds the content without firing events, as expected.

Available Premium plugins, which are listed by name in the Help dialog, are now in alphabetical order

When the Help > Help dialog is invoked, and the Plugins list was selected, available Premium plugins are supposed to be presented in alphabetical order by name.

The presented list was not entirely alphabetical, however.

With this update Premium plugin names are, now, correctly sorted in alphabetical order by name.

Security fixes

TinyMCE 6.2 includes fixes for the following security issues:

All 3 server-side components have been updated to include dependency updates addressing security issues. This includes Medium severity vulnerability fixes.

For information on the server-side components updates, see: Accompanying Premium self-hosted server-side component changes.

Deprecated

The autocompleter configuration property, ch, has been deprecated

Previously, the autocompleter used the ch configuration property to set a single character trigger.

This property has been deprecated and will be removed in the next major release.

The trigger configuration property should be used instead. It allows one or more characters to be specified as a trigger.

trigger: '<string>',

Known issues

This section describes issues that users of TinyMCE 6.2 may encounter and possible workarounds for these issues.

There are several known issues in TinyMCE 6.2.

Merge Tags cannot be manually added to a TinyMCE document in some circumstances

There are several circumstances where typing the Merge Tags prefix (by default, {{) does not activate the autocompleter. Consequently, choosing a Merge tag from the expected pop-up menu is not possible because the pop-up menu does not present.

Moreover, in the circumstances where the autocompleter does not activate, even typing the entire merge tag does not result in the string being turned in to a merge tag.

There is a workaround, however.

If typing the Merge Tags prefix does not work as expected, clicking the Merge Tags toolbar button and selecting the desired merge tag from the resultant menu inserts a functioning merge tag.

Merge Tags does not validate inserted strings that match merge tag syntax

If a string is pasted or otherwise inserted into a TinyMCE document and that string presents as a complete merge tag, the Merge Tags plugin will turn the string into an apparently working merge tag, regardless of the string’s content.

For example, if a TinyMCE instance is running the Merge Tags plugin and the plugin is using the default prefix and suffix characters — {{ and }} — pasting

{{not.a.merge.tag.value.for.this.document}}

into the document results in the pasted string being turned in to an apparently working tag, ready to take whatever values not.a.merge.tag.value.for.this.document is the placeholder for.

There is no current workaround.

A Merge Tags UI element has not been translated

TinyMCE 6.2 adds a new UI option to menu toolbar buttons. These buttons can now present a search field at the top of the menu.

As text is entered in to this search field, the menu contents update in real-time. And, when nothing in the menu matches the entered string, the MenuButton presents a No matches result.

This particular string, No matches has not been translated.

There is no current workaround. This error is slated for fixing in a future TinyMCE release.

The Autocorrect plugin over-rides auto-capitalization.

As a consequence of Autocorrect being case-sensitive, if

  • both autocorrect and capitalization are active; and

  • a word from the specified spelling error set is mis-typed at the beginning of a sentence;

the spelling is corrected but the initial letter is not capitalized.

The Autocorrect plugin’s auto-capitalization does not work on text immediately following a soft return in non-empty TinyMCE documents.

Auto-capitalization will not operate on the entered string if

  • a TinyMCE document contains any data other than a soft return character (Unicode U+2028, commonly entered by typing Shift+Return); and

  • the character immediately preceding an entered string is a soft return character.

The Autocorrect plugin’s auto-capitalization interferes with the following Premium plugins

When the Spell Checker Pro plugin is used, Autocorrection and Capitalization are disabled when a non-English language is selected.

When Autocorrect is used with the Spell Checker Pro Premium plugin, autocorrection and capitalization are disabled when a non-English language is selected.

Autocorrection and capitalization can, however, be re-enabled by selecting the Tools > Autocorrect menu item and the Tools > Capitalization menu item respectively.

In some circumstances, the Footnotes plugin does not automatically update changes

In the main, footnotes update automatically as they are added, removed, or edited. However, there are some circumstances where user-edits change footnote state but the footnotes themselves do not update.

For example, when an image caption with an attached footnote is removed (by unchecking the Show caption checkbox in the Insert/Edit Image dialog), the associated footnote text is not automatically removed.

In similar fashion, if a table row or column that contains a footnote is removed, the associated footnote text is not automatically removed.

These orphan footnote texts can be deleted manually. They can also be removed by clicking the footnotesupdate button in the toolbar.