TinyMCE 6.2

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.

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.

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.

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.

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.

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.

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.

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

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:

For information on:

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.

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.

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.

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.

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.

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.

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.

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.

For details see Content Formatting.

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 —

— 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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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

For example:

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

As a consequence of Autocorrect being case-sensitive, if

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

Auto-capitalization will not operate on the entered string if

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