TinyMCE 6.1

These are the Tiny Cloud and TinyMCE Enterprise release notes. For information on the latest community version of TinyMCE, see the TinyMCE Changelog.

Overview

TinyMCE 6.1 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, July 13th, 2022. It includes TinyMCE 6.1 and additional changes to premium plugins. These release notes provide an overview of the changes for TinyMCE 6.1:

Accompanying Premium Plugin changes

The following premium plugin updates were released alongside TinyMCE 6.1.

A11ychecker 3.0.2

The TinyMCE 6.1 release includes an accompanying release of the A11ychecker premium plugin.

A11ychecker 3.0.2 fixes the following UI bug:

The Tools > Accessibility Checker menu item opens a dialog. As such, its menu title should be Accessibility Checker….

The trailing ellipsis indicates the action will not execute without further user input and is required for all menu items that present dialogs. And, previously, this menu item did not.

This update corrects the menu title. Tools > Accessibility Checker… now includes the required ellipsis and presents as expected.

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

Comments 3.1.0

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

Enabling any of these features depends on changes made to the Core TinyMCE editor. As a consequence, version 3.1.0 of the Comments Premium Plugin requires TinyMCE 6.1 or later.

Comments 3.1.0 introduces the following enhancements:

A new event log API

A new API, editor.plugins.tinycomments.getEventLog() is now available.

As its name suggests, it returns a log of all Comment-related events, including:

  • when a new comment is added (and who added it).

  • when a comment is edited (and who edited it).

  • when a reply to a comment is added (and who added the reply).

  • when a comment is resolved (and who resolved the comment).

  • when a comment is deleted (and who deleted the comment).

The new API also supports an after option.

editor.plugins.tinycomments.getEventLog(
  { after: '2022-02-22T12:34:56Z' } // ISO-8601 standard: YYYY-MM-DDThh:mm:ssZ
)

restricts the returned list to Comment events after the time-stamp date.

Underlying this new API is a new CommentChange event, which gets fired when any modification is made to Comments data.

This new event also exposes the getEventLog() API. For example:

editor.on('CommentChange', (e) => {
  const logs = e.getEventLogs();
});

Avatars can now be displayed next to usernames in comments

TinyMCE now generates a different default avatar icon for each user.

And this default icon, presented next to user names in comments, can be replaced with a custom avatar.

In embedded mode, the avatar is supplied by the tinycomments_author_avatar option:

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'tinycomments',
  tinycomments_mode: "embedded",
  tinycomments_author: "testuser",
  tinycomments_author_name: "Test User",
  tinycomments_author_avatar: "https://example.com/image.ext"
});

In callback mode, the avatar is supplied via the authorAvatar property on the comments returned in the tinycomments_lookup callback.

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'tinycomments',
  tinycomments_mode: 'callback',
  tinycomments_create: create_comment, // Add the callback to TinyMCE
  tinycomments_reply: reply_comment,   // Add the callback to TinyMCE
  tinycomments_edit_comment: edit_comment,
  tinycomments_delete: delete_comment_thread,
  tinycomments_delete_all: delete_all_comment_threads,
  tinycomments_delete_comment: delete_comment,
  tinycomments_lookup: lookup_comment,
});

In both modes the avatar:

  • will be scaled to a 36px diameter circle; and

  • can be any filetype able to be wrapped in an <img> element.

Show comments sidebar on editor initialization

It is now possible to initialize a TinyMCE editor with a comment sidebar automatically visible and available but with focus still in the main editor.

To add a comment sidebar add sidebar_show: 'showcomments' to tinymce.init:

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: 'tinycomments',
  sidebar_show: 'showcomments',
});
The comment sidebar presents with no animation and, because of an internal TinyMCE change which ensures CSS loads earlier, no ‘flash’ as styles are applied. It is just there, along with any other initialised TinyMCE editor components. Also, as noted above, the sidebar does not take focus, which remains with the main editor.

Support annotating certain block elements directly when using the editor annotator API

Several new block elements can now have comments attached to them, including:

  • Tables of contents

  • Images

  • Images with captions

  • Code samples

  • Media in iframes

  • Embedded media

  • Embedded pages

When comments are showing, a 3px wide colored rectangle presents around any element with a comment attached. By default this rectangle presents in two shades of yellow: one for commented elements which are selected and one for commented elements which are not selected. Using a skin can, however, change this default.

The Comments sidebar now presents with a title bar

When the Comments sidebar is showing, it now presents with a title bar to visually distinguish the sidebar from the TinyMCE document proper.

The title bar label is Comments in English and the appropriately translated equivalent has been added to all TinyMCE supported languages.

The Comment text-entry field placeholder text has been changed

The new comment sidebar text-entry field contains placeholder text.

Previously, this placeholder string was, in English, Say something….

For this update, the English-language string has been changed to Add comment….

Updated translations of this placeholder text have also been added to all TinyMCE supported languages.

The label name for the Save Comment button has been changed and can now be translated

Previously, the Save Comment was labeled Save. After field reports that end-users were interpreting this to mean the entire TinyMCE document would be saved on pressing this button, two changes were made.

  1. The default label for this button is now Comment.

    This new default presents for both new comments and replies to existing comments.

  2. This default label can now be translated.

As is usual in TinyMCE, translation of this string is done wth addI18n():

tinymce.addI18n('<optional-IETF-language-code>', {
   'Comment': '<translation>'
});
When a comment is being edited, the default button, which writes the changes back and closes the Edit Comment dialog, is still labeled Save.

The change event was not fired when deleting all conversations

Previously, when all comments were deleted, existing undo levels were re-written but no new undo level was created. As a consequence no change event was fired.

This resulted in applications that relied on TinyMCE reporting its current state incorrectly assuming the now-deleted comments still existed.

This update corrects this. In Comments 3.1.0, deleting any or all comments fires a change event.

An additional undo level was incorrectly created when the Comments plugin was loaded at TinyMCE initialization

Previously, when the Comments plugin loaded, a bug in the plugin caused TinyMCE to put the comment model data into a first undo level.

This caused TinyMCE to present as if an undo option was available when there was no action to undo (for example, the Undo button would enable if all that had changed as the insertion point moving).

This update fixes this bug. When the Comments plugin loads, the comment model data is no longer placed into an undo level and no Undo actions will present as available until there are actual changes available to undo.

Opening the comments sidebar via an editor command did not respect the skip_focus argument

If the Comments sidebar was opened with an editor command and skip_focus was set to true — editor.execCommand("ToggleSidebar", false, "showcomments", { skip_focus: true }); — the sidebar still stole focus.

This update corrects this: skip_focus: true is honored, as expected, and the sidebar does not steal focus.

Comments did not block the sidebar UI while saving the data in callback mode

When Comments was working in callback mode, it was possible to send multiple save actions from the Comment text-entry UI.

Save actions are asyncrhonous, so this made it possible to generate multiple saves of the same comment.

This update disables the Save UI when a comment is being saved, ensuring only one copy of a comment is saved at a time.

A selected hr block could be commented on when it should not have been possible

A new feature of the Comments plugin is support for annotating many block-level elements directly, using the editor annotator API (see above).

This new feature revealed an existing bug that made it possible to, at least apparently, add a comment to an <hr> block.

The comment did not, in fact, attach to the horizontal rule. It attached to the Comment sidebar, which resulted in the comment showing even when surrounding paragraphs were clicked in or selected.

With this update the bug has been fixed and <hr> blocks specifically cannot have comments added to them.

Comment text was retained in the comment placeholder after more than one comment had been submitted

If a second comment was added to a given element, the re-displayed ‘empty’ Comment text entry field presented with the text of the second comment in this field rather than the default placeholder text, Add comment….

If a third comment was added, the re-displayed Comment text entry field then presented with the text of the third comment, and so on.

This update corrects this. When the Comment sidebar re-displays the Comment text entry field for a further comment, the previous comment is not retained and presented. Rather, the Add comment… placeholder text displays, as expected.

The comment textarea will now shrink, as well as grow, in response to comment content changes

Previously, the comment text entry field would grow larger to more usefully display a long comment-in-progress but it did not shink back to its orignal size when the text in this field was deleted.

This Comments update corrects this. When text is deleted from a grown-larger Comments text-entry field, this field now snaps back to its original size.

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

Enhanced Media Embed 3.0.1

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

Enhanced Media Embed 3.0.1 fixes the following bug:

Console warnings were logged incorrectly when the media plugin was not used

Previously, a 'media_url_resolver' not registered warning was printed to the console when the Enhanced Media Embed was not used.

This update corrects this error. When the plugin is not used, extraneous warnings are no longer sent to the console.

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

Page Embed 2.1.0

The TinyMCE 6.1 release includes an accompanying release of the Page Embed premium plugin.

Page Embed 2.1.0 includes the following enhancement:

The entirety of the Page Embed dialog can now be translated

Previously, four elements in the Page Embed dialog presented in English when the configured language was not English.

Three elements — the text-box label, Long description URL, and the checkbox labels Show iframe border, and Enable scrollbar — presented in English when the configured language was Vietnamese, Hindi, Malay, Japanese or Dutch.

A fourth element — the Scrollbar label — presented in English no matter the configured language (ie, it was not translated in to any non-English language).

With this update, all these elements have been setup so as to be translatable into all configurable languages. As well, translations in to all currently supported languages have been added. When TinyMCE is switched to another language, these elements now appear in that language.

For information on the Page Embed plugin, see: Page Embed plugin.

PowerPaste 6.1.0

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

PowerPaste 6.1.0 provides the following bug fixes:

Depending on the source application, some objects pasted in to TinyMCE when running inside Safari were presented as PDF images

For example, when an equation created within the macOS application, Pages, is copied, the equation is placed on the macOS clipboard in several formats. And, when subsequently pasted, the format provided to TinyMCE by Safari is a PDF object.

This format does not display or store safely within <img> tags.

With this update, PowerPaste converts provided PDF objects into a PNG image, which reside and display within <img> tags safely, as expected.

With this fix PowerPaste is able to detect PDF objects and have them converted into PNG images. It does not mean PowerPaste now supports pasting from the Pages application. As of this release, PowerPaste does not specifically support pasting from Pages.

If a colon or an exclamation point — : or ! was present in the path portion of a URL, PowerPaste’s link detection logic treated the characters as, in effect, end-of-path boundaries. As a consequence, while the string was pasted into TinyMCE, the expected link was incomplete and incorrect.

For example, pasting the string

resulted in the following, incomplete, link and trailing text

<a href="https://example.com/">https://example.com/</a>!exclamation-point

Equivalent results occurred when URL paths contained the colon character (for example, https://example.com/:colon).

With this update, the link detection logic has been improved to capture and present such URLs correctly.

Now, pasting the string

results in the following, complete, link and no trailing text

<a href="https://example.com/!exclamation-point">https://example.com/!exclamation-point</a>
Exclamation points and colons are still boundary characters for URL detection and delimiting. If the string https://example.com/colon: is pasted or typed into a TinyMCE document, automatic link detection will produce a link that does not include the trailing colon character.

Pasted URL-like strings without a defining protocol were detected as URLs but not provided with a protocol

When fully qualified domain names (FQDN), such as www.example.com, were pasted in to a TinyMCE document, they were detected as URLs, but no protocol was added to the consequent underlying href attribute.

As a consequence, the text would display as a clickable link but not work as such.

With this release such FQDNs are, when pasted in to place, supplied with TinyMCE’s default protocol — https — in the underlying href attribute. And these pasted strings now display as a clickable link and works as such, as expected.

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

Real-Time Collaboration 2.1.0

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

Real-Time Collaboration 2.1.0 adds one new feature and fixes two bugs:

Real-Time Collaboration can now disable inline boundaries

Inline boundaries are highlights applied to certain inline elements. The exact elements highlighted can be configured with inline_boundaries_selector.

Setting inline_boundaries: false turns this highlighting off.

With this release, Real-time Collaboration now supports this setting.

The equivalent behavior could be achieved by setting inline_boundaries_selector to an empty string. And this setting was, previously supported by Real-time Collaboration (and still is). Setting inline_boundaries to false is, however, the preferred method of turning inline element highlighting off.

Lists selected with Select All (Ctrl+A or Cmd+A) did not provide a valid fragment for editor.selection.getContent()

If a TinyMCE document contained only a list, and the entire document was selected using Edit > Select All (or by typing Ctrl+A or Cmd+A), the selection did not present as valid to editor.selection.getContent().

If getContent was run after such a document was selected using Select All, getContent returned an empty string.

With this update, this behavior has been corrected. Selecting all of such a document and running getContent now returns an html list, as expected.

The ‘reconnect’ message did not appear after connectivity was lost

Previously, Real-time Collaboration only checked for jitter (the variations in the speed of signal transmission to signal reception over the network connection over time). Consequently, if a Network connection went down, and stayed down, the ‘connection lost’ alert did not appear.

With this update, Real-time Collaboration now also checks for straight-up connectivity. And, if the connection goes down for 30 seconds, the ‘connection lost’ alert appears.

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

Spell Checker Pro 3.0.3

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

Spell Checker Pro 3.0.3 includes the following bug fix:

Spell Checker Pro caused inline editing sections to steal window focus in some circumstances.

When scrolling a browser window containing a TinyMCE instance, a conflict between a TinyMCE API and Spell Checker Pro’s ‘preserve selection’ logic could cause inline editing sections to steal window focus.

This stolen window focus was particularly evident with multiple inline editors on a single page.

With this update, Spell Checker Pro now correctly handles the API’s behavior and, consequently, scrolling through a window containing an inline editor or editors does not cause window focus to change, as is expected.

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

Table of Contents 1.1.0

The TinyMCE 6.1 release includes an accompanying release of the Table of Contents premium plugin.

Table of Contents 1.1.0 includes the following change:

As part of making it possible to link Comments to almost any block element in a TinyMCE document, a data-mce-toc attribute is now added to the Table of Contents wrapper div while editing.

This is an internal attribute, used as part of keeping comments attributed to the correct block element. It has no user- or integrator-facing impact.

For information on the Table of Contents plugin, see: Table of Contents plugin.

Accompanying Premium Skins and Icon Packs changes

The TinyMCE 6.1 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 update:

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

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

Improvements

TinyMCE 6.1 also includes the following improvements:

rel is an attribute for the <a> element (and other elements). Setting this attribute to rel="noopener" instructs the browser to set the window.opener JavaScript API to null. By default window.opener references the page that opened the link.

Setting window.opener to null set the browser to load the target resource without granting the target resource access to the document that opened it.

With this release, all TinyMCE help dialog links out to tiny.cloud include the rel="noopener" attribute and value.

This provides basic protection against attacks that mis-use the window.opener default.

The mceLink command can take a new value, { dialog: true }.

When set with this value, the Link… dialog will always open when mceLink is run.

Support annotating certain block elements directly when using the editor annotator API

Several new block elements can now have annotations attached to them, including:

  • Tables of contents

  • Images

  • Images with captions

  • Code samples

  • Media in iframes

  • Embedded media

  • Embedded pages

Clearer focus states for buttons while navigating with keyboard

A blue outline now appears around all TinyMCE button types (primary, secondary, and tertiary) when such buttons are made the current focus using keyboard navigation.

This outline is similar to the presentation that denotes focus in TinyMCE text fields.

When a mouse pointer is used to set focus, the blue outline does not appear and the button does not otherwise change its appearance.

Additions

As well, TinyMCE 6.1 includes the following additions:

New sidebar_show option to show the specified sidebar on initialization

It is now possible to initialize a TinyMCE editor with a sidebar visible and available but with focus still in the main editor.

To add a sidebar_show: '<sidebar-name>' to tinymce.init:

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  sidebar_show: '<sidebar-name>',
});

If the sidebar is custom, the sidebar should be setup in the setup section of tinymce.init:

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  setup: (editor) => {
    editor.ui.registry.addSidebar('<sidebar-name>', {
      tooltip: '<sidebar-name>',
      icon: '<icon-name>',
      onSetup: (api) => {
        console.log('Render panel', api.element());
      },
      onShow: (api) => {
        console.log('Show panel', api.element());
      },
      onHide: (api) => {
        console.log('Hide panel', api.element());
      }
    });
  }
});
The sidebar presents with no animation or other effect. It is just there, along with any other initialised TinyMCE editor components. Also, as noted above, the sidebar does not take focus, which remains with the main editor.

New newline_behavior option controls what happens when the Return or Enter key is pressed or the mceInsertNewLine command is used

Setting forced_root_block to false or an empty string was deprecated in TinyMCE 6.0. This option now only accepts valid block elements.

However, some use cases relied on forced_root_block: false to keep material created in TinyMCE for use and presentation elsewhere from being placed inside the <p> block element.

The newline_behavior option has been added to TinyMCE 6.1 to cater to these use-cases.

newline_behavior affects what is added to a document when the mceInsertNewLine command is run or when any of the four create a new line keystrokes are pressed: Return, Enter, Shift-Return, or Shift-Enter.

By default these keystrokes work as follows:

  1. pressing Return or Enter creates a new paragraph.

    For example, in ordinary text, pressing Return closes the current <p> tag, moves the insertion point in the TinyMCE editor to a new line and opens a new <p> tag.

  2. pressing Shift+Return or Shift+Enter creates a new line.

    For example, in ordinary text, pressing Shift+Return enters two <br> tags and moves the insertion point in the TinyMCE editor to a new line.

The newline_behavior option takes one of four values:

Value Action

block

sets TinyMCE to treat all four keystrokes as if they are Return.

linebreak

sets TinyMCE to treat all four keystrokes as if they are Shift+Return.

invert

swaps the behavior or Return and Shift+Return (and Enter and Shift+Enter). That is, pressing Return results in Shift-Return behavior, and vice versa.

default

default, as its name suggests, sets TinyMCE to do what it does by default when Return, Enter, Shift+Return, or Shift+Enter are pressed.

Two other commands that, in their effect, add new lines to a TinyMCE document are InsertParagraph and InsertLineBreak. Their behavior is not affected by any newline_behavior option.

New transparent property for iframe dialog component

As part of the fix for correcting the presentation of TinyMCE content in the Preview and Insert template dialogs, the iframe dialog component now supports a new transparent property.

New removeAttributeFilter and removeNodeFilter functions added to the DomParser and DOM Serializer APIs

Two new filter functions — removeAttributeFilter and removeNodeFilter — have been added to the DomParser and DOM Serializer APIs.

Each function takes two arguments: name and callback.

name is required.

callback is optional.

name can take a comma-separated list of attribute or node names.

If both name and callback are provided, the functions remove the specified callback.

If only name is provided, the functions remove all callbacks for the specified name.

When only name is provided, the new functions work in equivalent fashion to the editor.off API, which removes all event handlers when only a name is provided.

New iframe_template_callback option in the media plugin.

The new iframe_template_callback option, provided by Namstel, is an addition to the media plugin.

The iframe_template_callback option takes a function and replaces the default callback when the provided source URL would produce an iframe embed.

It works equivalently to the audio_template_callback and video_template_callback options, but for iframes.

New dispatchChange UndoManager API

The new dispatchChange API allows for the generating of an undo level outside the current editor’s context.

It takes the current editor undo level status as level and the current undoManager layer as lastLevel. When a change event fires, however, dispatchChange does not put the change in undo level on to the undoManager stack.

Changes

TinyMCE 6.1 also incorporates the following changes:

Toggling fullscreen mode with the fullscreen plugin now also fires the ResizeEditor event

A bug in fullscreen mode toggling, in which notifications did not properly reposition, was addressed for this TinyMCE release.

As part of that fix, a change was made to the fullscreen plugin.

As of TinyMCE 6.1, toggling fullscreen mode with the fullscreen plugin also fires the ResizeEditor event.

Getting the editor’s text content now returns newlines instead of an empty string if more than one empty paragraph exists

Previously, if a TinyMCE editor instance contained nothing but blank lines (ie, more than one Return but no other material), the plain text version of the editor’s contents was an empty string.

In TinyMCE 6.1, the plain text version of the same material is two newline characters — \n\n — for each entered Return.

In the HTML version of such a document (viewable by choosing View > Source Code), each Enter or Return was represented by a paragraph tag containing a non-breaking space entity: <p>&nbsp;</p>. This representation, which accurately presents the empty paragraphs as white-space is unchanged in TinyMCE 6.1.

The end_container_on_empty_block option can now take a string of blocks, allowing the exiting of a blockquote element by pressing Enter or Return twice

Previously, when the insertion point was within a blockquote element, and the blockquote element was the only block element in the TinyMCE document, there was no way of exiting the element without deleting all the text also within the element.

As of this update, the end_container_on_empty_block has been changed such that pressing the Enter or Return key twice will exit the insertion point from a blockquote element. This is the same action that exits other block elements, such as lists.

The default value for end_container_on_empty_block option has been changed to blockquote

Previously, the end_container_on_empty_block took a boolean value and, by default, that value was false.

As part of the changes made to enable the pressing Enter or Return twice exits an in-document blockquote element change noted above, this option’s default value has been changed.

As of TinyMCE 6.1, end_container_on_empty_block takes the value blockquote by default.

The boolean values, true and false remain valid values to assign to this option.

Custom elements are now treated as non-empty elements by the schema

Previously TinyMCE treated custom elements as empty elements. The TinyMCE schema was such that the isEmpty check returned true for all custom elements.

With this update the TinyMCE schema has been updated; the isEmpty check now returns false for custom elements.

The autocompleter’s menu HTML element is now positioned instead of the wrapper

The autocompleter menu element presents a menu of related options. If the current viewport is too small to present the entire menu, access to the ‘overflow’ is ensured by presenting a scrollbar in the menu.

Previously, however, the rendering of this menu’s height (which, in turn, establishes whether a scroll bar is required) was done with the wrong element. Rendering was done by tox-autocompleter, not tox-menu. (tox-menu renders the height of all other TinyMCE menus.)

In some circumstances this error resulted in the top or bottom menu borders to scroll out of view, making the menu present as cut off.

This update corrects this. Rendering of the autocompleter menu overflow is now assigned to tox-menu and its menu borders do not scroll out of view.

Selecting Insert > Link… or clicking the Link toolbar button did not, previously, execute the mceLink command. (If the link_quicklink option was enabled, using the Ctrl+K or ⌘+K shortcut to open the Contextual Link Toolbar did execute mceLink, however).

This behavior by the UI was not consistent with other, related, actions. For example, clicking the Unlink toolbar button executed the unlink command. As well, not executing a command meant it was not possible to track the Link… dialog being opened, and the command could not be over-ridden with addCommand.

With this update, mceLink is always executed when the Link dialog or Contextual Link Toolbar is opened.

Choice menu items will now use the menuitemradio ARIA role to better reflect that only a single item can be active

TinyMCE uses the Accessible Rich Internet Applications (ARIA) Working Group guidelines to make TinyMCE accessible to as wide a range of users as is possible.

To this end, some TinyMCE menu items were assigned the menuitemcheckbox ARIA role. However, screen readers report this role as meaning each item in the menu can be toggled independently. This is not true: the options in these menus are mutually exclusive.

The appropriate ARIA role for these objects is menuitemradio and, as of this release, this is the ARIA role these menu items are assigned.

Consequently, screen readers will, correctly, report the options in these menus as mutually exclusive.

Bug fixes

TinyMCE 6.1 provides fixes for the following bugs:

Inconsistent visual behavior between choosing Edit → Select All and typing Ctrl+A or ⌘+A when a document contained an image.

Previously, if a TinyMCE editor document included an image, typing the Select All keyboard shortcut (Ctrl+A or ⌘+A) caused the image handler (the visual indicator that the image is selected) to appear around the image.

However, if Edit → Select All was chosen from the TinyMCE menu bar, the image handler did not display.

The image handler display was a visual error. It should not present unless the image is the only selected object. Select All selects the whole TinyMCE document, not just the image.

With this update, typing Ctrl+A or ⌘+A, or choosing Edit → Select All from the TinyMCE menu bar, both produce the same effect (the entire document is selected) and the same visual presentation (the image handler outline does not display).

When the insertion point was within text that was also a link, typing Alt-Return or Option-Return opened the link in a new browser tab. This behavior, while non-destructive, is incorrect.

With this update, TinyMCE behaves as expected: when the insertion point is within text which is, itself, within an anchor tag, typing Alt-Return or Option-Return does nothing.

Spaces were not added correctly on some browsers when the insertion point was immediately before or after a contenteditable block element

In some browser, if a TinyMCE document contained text immediately adjacent to a block element with a contenteditable property, and the insertion point was placed between the text and the block element, pressing the space bar appeared to not add the space character, as expected.

For example, if a TinyMCE document contained the following —

<p style="margin: 0; word-break: break-word;">
text
  <strong>
    <span contenteditable="false" style="display: block;">
      and not-editable words on a following line
    </span>
  </strong>
</p>"

— placing the insertion point after the word text and pressing the space bar would not work as expected in some browsers.

TinyMCE 6.1 fixes this error. Now, when the insertion point is in such a point in a TinyMCE document, pressing the space-bar adds a space, as expected.

Images were not showing as selected when selected along with other content

Previously, when an image was one of the selected objects in a TinyMCE document, the image did not present with the Selected background color like text objects do. (In most browsers the show the object is selected color is, by default, blue.)

The image was selected, but there was no visual feedback to show this.

With this update, images that are selected as part of a multi-object selection show the same Selected background color as other objects.

When an image is the only selected object, the image handler outline, complete with resize handles, shows the image is selected. This was the behavior previously, and continues to be the behavior with this new release.

Images that used a Data URI were corrupted when the data wasn’t Base64 encoded

Previously, the TinyMCE upload logic incorrectly assumed all data URIs used Base64 encoding. As a consequence, if a data URI used, for example, percent-encoding (also known as URL encoding), the data was corrupted.

For this update, the upload logic has been corrected. Data URIs are no longer assumed to all be Base64 encoded and using other encoding methods (such as percent-encoding) does not cause the data to be corrupted.

Notifications did not properly reposition when toggling fullscreen mode

A TinyMCE toolbar option, Fullscreen, toggles the TinyMCE editor between the size it takes by default and, as the toolbar’s name suggests, fullscreen. Fullscreen is the largest size available to the editor (ie, taking up all the space available to TinyMCE in the browser).

If a TinyMCE instance had a custom notification, editor.notificationManager.open(), set to display when the Fullscreen button was used, toggling from Fullscreen back to default resulted in the notification displaying outside the TinyMCE editor.

TinyMCE 6.1 corrects this. When toggling between the two Fullscreen states, custom notifications now display immediately below the toolbar in either state, as expected.

Dialogs no longer exceed window height on smaller screens

When re-sizing the viewport while a TinyMCE dialog is open, the dialog did not start re-sizing until the viewport boundary began encroaching on the dialog. As a consequence, the dialog was partially cut off in the re-sized viewport (specifically, the bottom border and several pixels of the dialog’s buttons were over-shot) and it could become difficult to distinguish the dialog from the viewport.

With this update, this behavior has been corrected. When a TinyMCE dialog is open and the viewport is re-sized, the dialog now re-sizes such that both the top and bottom borders of the dialog are always within the current viewport.

In some cases pressing the Backspace or Delete key would incorrectly step into tables rather than remain outside

In some circumstances, when a table was followed immediately by a text paragraph, and the user deleted the text paragraph by back-spacing through each character, pressing the backspace character after the last character was removed resulted in the insertion point moving in to the table. If the user continued pressing the backspace key, material in the table’s bottom-right cell was deleted.

The expected behavior when backspacing on an empty line immediately following a table is for the insertion point to not move at all.

With this update, TinyMCE behaves as expected. Pressing the backspace key on an empty line immediately following a table produces no change to the insertion point location.

Some function types in the TreeWalker API missed that it could return undefined

Backspacing through material in an active TinyMCE editor could, in some circumstances, result in the insertion point stepping into a table and continue deleting where the expected behavior was for the insertion point to stop on the line below the table.

In investigating and fixing this issue (see immediately above) it was also found that some function types in the tinymce.dom.TreeWalker class did not detect that the class could return an undefined value.

This has been corrected and all tinymce.dom.TreeWalker functions now correctly detect undefined values when these are returned.

Text alignments, such as flush left and centered, could not be applied to <pre> elements

Previously, TinyMCE did not support changing the alignment of text set within <pre> tags. However, if text that was set within other tags (for example, <p> tags or a heading tag, such as <h1>) had an alignment set and the text was then changed to be set within <pre> tags, the previously applied align style remained in place.

With this update, TinyMCE now supports applying, altering and removing align styles to text set in <pre> tags.

Nuget packages for .NET and .NET Core are now configured to copy TinyMCE into /wwwroot/lib/ when TinyMCE is installed into a project

Previously, the TinyMCE Nuget package did not automatically copy TinyMCE in to /wwwroot/lib/ when installing TinyMCE into a .NET project.

This resulted in TinyMCE not working as expected (or at all).

This error has been corrected with this update. Installing the TinyMCE Nuget package into a .NET project automatically places TinyMCE in /wwwroot/lib, as expected.

UI components, such as dialogs, would in some cases cause the esc KeyUp event to incorrectly trigger inside the editor

In TinyMCE the esc (Escape) key can be used to exit or ‘escape’ from an active user-interface component. If a menu is open, pressing the esc key closes the menu. If a dialog is present, pressing the esc closes the dialog.

TinyMCE responds to the keydown event and exits the active element when the esc key is pressed. Previously, however, the consequent keyup event (generated when the user stops pressing the esc key) was propagated to the TinyMCE editor. This should not have happened.

The keydown event does not propagate outside the component listening for it and neither should the KeyUp event.

As of this update, this is the behavior: pressing the esc key closes or exits an active user-interface component and neither the keydown or keyup event are propagated outside the component listening for these events.

Selection direction was not stored or restored when getting or setting selection bookmarks

Selection direction is a real-time state that ‘knows’ where the current text selection began and, consequently, ‘knows’ which direction of pointer movement or which arrow key selects more text or de-selects already selected text.

For example, consider a document containing words written in a left-to-right script and an insertion point set at the end of a word. A user then holds down the Shift key and presses the left-arrow key. The selection direction for this moment and this action is set by said action. While the Shift key is held down, pressing the left-arrow key adds letters to the selection and pressing the right-arrow key removes letters from the selection.

When a TinyMCE document had View > Show invisible characters checked and text was selected in this manner, and the user paused for a second or two, pausing the selection extension, a bookmark was used to store and then restore the selection in the document.

In doing this, however, the selection direction was lost, because getBookmark did not store the selection direction state to pass back to moveToBookmark for restoration.

When a user re-started the selection process by pressing the right arrow key, TinyMCE extended the selection from the right-most already-selected letter rather than, as expected, removing the left-most already-selected letter from the selection.

As of this update, selection direction is stored and restored correctly. And pausing and restarting a selection as described above works as expected.

Some versions of Safari caused an exception when calling editor.selection.isForward()

Some versions of Safari could end up with an invalid selection. When TinyMCE was running in this environment, the invalid selection resulted an exception being thrown when editor.selection.isForward() was called.

With this update, TinyMCE handles Safari’s invalid selection such that the exception is no longer thrown.

The InsertParagraph or mceInsertNewLine commands did not delete the current selection like the native command does

The InsertParagraph command was added to provide a TinyMCE-native replication of browser implementations of this functionality.

However, when a string was selected and the InsertParagraph was then executed, it did not delete the selected string and insert the paragraph break as expected. Instead, the command inserted a paragraph break at the beginning of the selected string and added the selection to the new trailing paragraph.

With this update, this behavior has been corrected. Selecting a string and running editor.execCommand('InsertParagraph'); now replaces the selection with a paragraph break, as expected.

Triple-clicking did not select the paragraph in Google Chrome in some circumstances

Previously, when triple-clicking a text paragraph in a TinyMCE document that —

  • included a nested contenteditable structure below the paragraph;

  • had an already-selected paragraph above

— the paragraph was not selected.

Instead the insertion point moved to the beginning of the paragraph. This only occurred if the host browser was Google Chrome. When the host browser was, for example, Safari or Firefox, triple-clicking a paragraph in this circumstance selected the paragraph as expected.

With this update, triple-clicking text a paragraph above a contenteditable structure and below an already selected paragraph selects the clicked-on paragraph, no matter the host browser.

This update works around a Google Chrome bug by implementing on-triple-click selection behavior within TinyMCE regardless of the host browser.

When text within an inline boundary element was selected and the right-arrow key was pressed, the insertion point incorrectly moved to the left

TinyMCE provides an inline_boundaries_selector option. If this option is loaded, by default, it sets a[href],code, and .mce-annotation as the elements inline boundaries apply to. Other inline elements — such as strong, em and span — can be added to these defaults.

Previously, however, when a custom inline_boundaries_selector was initialised in a TinyMCE document, an erroneous keyboard navigation behavior presented.

For example, if the following was added to tinymce.init

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

— and text set within <span></span> tags was selected, pressing the right arrow key caused the text to be de-selected (expected behavior) and the insertion point to present to the left of the previously selected text (entirely not expected behavior).

TinyMCE 6.1 corrects this. In the same circumstances as above, pressing the right arrow key in TinyMCE 6.1 puts the insertion point to the right of the newly de-selected text, as expected.

Indenting or outdenting list items inside a block element that was inside another list item did not work

If a list element within a list was also inside a block element, such as a <div></div>, placing the insertion point within any of the displayed lists and pressing Tab or Shift+Tab did not act as expected.

Instead of indenting the list element (if Tab was pressed) or outdenting the list element (if Shift+Tab was pressed), nothing happened.

With this update, when the insertion point is in a list within a list within another block element, pressing Tab or Shift+Tab behaves as expected.

If Tab is pressed in this circumstance, the list element is moved in to a further nested list created inside the div. If Shift+Tab is pressed in this circumstance, the indented list element becomes a list element in the list it was previously inside.

Changing the list type of a list within another block element altered the parent element that contained that list

If a list was within another block element and the list type was changed TinyMCE changed the list type as requested but also, and incorrectly, created a new list outside the root element with a list type of the list before it was changed.

For example, if a bulleted list within a <div></div> was changed to a numbered list, TinyMCE changed the bulleted list to a numbered list but, at the same time, created a new bulleted list that encompassed the now-numbered list.

Also, the list type change did not need to be from an unordered to an ordered list. The same erroneous list-creation happened if a round-bullet bulleted list was changed to a square-bullet bulleted list.

The TinyMCE 6.1 update corrects this. When changing a list’s type, TinyMCE leaves the parent element unchanged, as expected.

Custom elements added to otherwise blank lines were removed during serialization

Previously TinyMCE treated custom elements as empty elements. The TinyMCE schema was such that the isEmpty check returned true for all custom elements.

This caused custom elements added to empty lines to be automatically removed during serialization.

With this update the TinyMCE schema has been updated; the isEmpty check now returns false for custom elements.

As a consequence, it is now possible to add custom elements to empty lines in a TinyMCE document.

Pasting columns in tables could, in some circumstances, result in an invalid table

Errors in the logic of both the Copy Column and Paste Column actions could, in some circumstances, cause a Copy and Paste of table cells to produce an invalid table.

For example, with the insertion point in a cell in the third column of a 4x4 table, selecting Table > Column > Copy Column and then Table > Column > Paste Column Before produced what appeared to be a 5x4 table. But at least one cell in the now-5th column was not generated on paste, making the table invalid.

Table presentation did not reveal the error. When a column was pasted in, the table would appear to change as expected. But, because the underlying table DOM was invalid, attempting to change material in some cells would fail.

With this update, the logic errors in Copy Column and Paste Column have been corrected: copying and pasting table columns now works as expected in all tested circumstances.

Copying columns in tables could sometimes result in an invalid copy

Errors in the logic of the Copy Column command could, in some circumstances, cause table cells to be, in effect, mis-copied. That is, using the Table > Column > Copy Column did not result in a valid and safely paste-able copy of the cells being placed on the clipboard.

With this update, the logic errors in the Copy Column have been corrected and copied table cells can now be safely pasted.

These are the same logic errors noted in Pasting columns in tables could, in some circumstances, result in an invalid table above. The bug documented here pertains to the error introduced when copying.

Previously, if a URL containing valid characters rarely used in URLs, such as ! (the exclamation mark) and : (the colon), was pasted in to a TinyMCE document, TinyMCE’s URL detection treated these characters as boundaries and, consequently, incorrectly parsed the string and presented an incomplete link.

For example, if

https://example.com/:w:/index.html

was pasted into a TinyMCE document, the URL detection would cause the pasted text to be transformed into an html fragment as follows:

<a href="https://example.com/">https://example.com/</a>:w:/index.html

With this update, valid characters such ! and : are correctly treated as part of the URL, and pasting in URLs that include these characters results in a clickable link that includes the entire pasted URL.

Also, this improved link detection logic works when manually typing in a URL. If the above example were typed in to a TinyMCE document, the automatic link-creation would wrap the entire string in an anchor tag after a boundary character (such as a space) was typed.

Punctation characters, such as : (the colon) and . (the full-stop or period), at the end of a pasted URL are still ignored. In almost every case, trailing punctuation marks are functioning as punctuation marks, not as part of the URL.

If selected content straddled a parent and nested list, cutting the selection did not always set the list style to none on the parent list

Previously, the list plugin was only responsible for TinyMCE’s behavior when a list, or part of a list, was deleted. If, for example, a part of a list was selected and the Backspace or Delete key was pressed.

If, however, that same list part was selected and then cut to the clipboard, the behavior was left to the host browser.

As a consequence, there were circumstances where cutting a list, or part of a list, to the clipboard did not behave as expected. In some circumstances, the remaining list was not the expected list, or the expected blank line did not present.

With this update, the list plugin cleans up after cutting a TinyMCE list, or part thereof, as it does when a list, or part thereof, is deleted. Cutting to the clipboard now leaves the same result as deleting, as expected.

Autocompleter was not triggered at the start of empty nested list items within non-empty list items

The TinyMCE Autocompleter feature displays suggestions while the user is typing. If, however, the insertion point was at the start of an empty list item nested inside an outer list item that contained text, typing a trigger character (such as the :) did not produce the suggestions display, as expected. (If the outer list item was otherwise empty, the trigger character worked.)

The underlying cause was Autocompleter walked too far up the DOM tree when trying to detect if the content was at the start of a boundary. As of this update, Autocompleter improves this detection and, consequently, trigger characters cause the suggestions display to present in nested list items inside populated list items, as expected.

Some template plugin option values were not escaped properly when doing replacement lookups with Regular Expressions

The TinyMCE template plugin processes the following settings using regular expression (regex) matches:

  • template_cdate_classes

  • template_mdate_classes

  • template_selected_content_classes

  • template_replace_values

  • template_preview_replace_values

Previously, however, it did not escape or correctly handle all the generated regex expressions.

In some cases it did not escape option values for safe use within a regex and, in one case, incorrect handling caused word boundaries — \b — to not work as expected.

These errors have been corrected. In TinyMCE 6.1, template option values are escaped properly. As well the incorrect handling has been corrected, and word boundaries work as expected.

Copy events were not dispatched in readonly mode

When a TinyMCE document was in read-only mode, copy events were captured and killed.

This capture meant that neither TinyMCE’s built-in copy-and-paste, nor the PowerPaste plugin’s copy-and-paste could intercept the copy event and act to copy (and, consequently, paste) the selected material.

Instead, copying from a read-only TinyMCE document fell-back to the host browser’s copy command.

In some circumstances, this resulted in the subsequently pasted material containing unexpected characters. Specifically, normal spaces were sometimes replaced with non-breaking spaces, &nbsp;.

In TinyMCE 6.1, documents in read-only mode no longer captures copy events. Rather, they white-list copy events and pass them to the appropriate event listener (either TinyMCE’s built-in capability or the PowerPaste plugin).

Consequently, unexpected characters no longer present in material copied-and-pasted from read-only TinyMCE documents.

Ctrl+Shift+Home/End or ⌘+Shift+Up-arrow/Down-arrow did not expand the selection to a contenteditable="false" element if the element was at the beginning or end of a document

The keyboard shortcut Ctrl+Shift+Home or ⌘+Shift+Up-arrow selects all material from the insertion point to a document’s beginning. Equivalently, Ctrl+Shift+End or ⌘+Shift+Down-arrow selects all material from the insertion point to a document’s end.

These selection behaviors are not TinyMCE-specific. These keyboard shortcuts select in this fashion in virtually all applications.

However, if the first element in a TinyMCE document had a contenteditable="false" property, the Ctrl+Shift+Home or ⌘+Shift+Up-arrow keystrokes did not extend the selection to the first element. That is, the selection extended to the trailing edge of the element with a contenteditable="false" property but no further.

Equivalently, if the last element in a TinyMCE document had a contenteditable="false" property, Ctrl+Shift+End or ⌘+Shift+Down-arrow extended the selection only to the leading edge of this final element.

This selection behavior (ie not allowing the generic keyboard shortcuts to extend the selection to elements with contenteditable="false" properties if these elements are at the start of end of the material being selected) is the native behavior of all host browsers supported by TinyMCE.

As of TinyMCE 6.1, however, an override has been introduced. This override enables TinyMCE to extend selection of contenteditable="false" elements at the beginning or end of TinyMCE documents using these generic keyboard shortcuts.

Consequently, Ctrl+Shift+Home or ⌘+Shift+Up-arrow and Ctrl+Shift+End or ⌘+Shift+Down-arrow now works in TinyMCE documents as they do in almost all other applications.

<pre> tags were not preserved when copying and pasting

Previously, when text set between <pre> tags was cut or copied and then pasted to a new line in a TinyMCE document, the <pre> tags were not preserved on pasting.

This update corrects this. <pre> formatted text copied or cut will now continue to be <pre> formatted text when pasted elsewhere in a TinyMCE document.

Preview and Insert Template dialogs now display the correct content background color when using dark themed skins

Previously, when TinyMCE was in any dark mode (ie skin pointed to a dark themed skin), choosing View > Preview presented a background in the preview that was not consistent with the dark themed content.

Choosing Insert > Insert template… produced the same inconsistent presentation in the Insert template… dialog.

This update corrects this inconsistency. As of TinyMCE 6.1, no matter the current mode, the Preview and Insert template… dialogs now use the same background color as the current TinyMCE editor window.

Fixed incorrect word breaks in TinyMCE menus when the menu presented with a scrollbar

In some browsers, including Safari and Firefox on macOS or Linux, items in TinyMCE menus wrapped incorrectly when the browser window was small enough to cause the TinyMCE menu to present with a scroll-bar.

In this circumstance, the menu item wrapped within a word, pushing individual characters on to an extra line.

Despite the visual mis-representation, the menus still worked as expected.

With this update, the visual mis-representation has been fixed. If TinyMCE menus must wrap, because of limited view space, the wrapping occurs at word boundaries, not within words.

The InsertLineBreak command did not replace selected content

The InsertLineBreak command, as its name suggests, adds a line-break at the insertion point.

Previously, however, if there was material selected in a TinyMCE document and the InsertLineBreak command was issued, the added line-break did not replace the selected material. Instead, it, incorrectly, appended the line-break to the selection.

This update corrects this. Running InsertLineBreak when a TinyMCE document has material selected now results in the added line-break replacing the selected material.

Delete or Backspace did not work if the selection being deleted contained a contenteditable="false" element at the beginning or end of a document

If the first or last element in a TinyMCE document had a contenteditable="false" property and material within that element was selected, pressing the Delete or Backspace key did not delete the material inside the element with the contenteditable="false" property.

This update corrects this. In TinyMCE 6.1 material inside elements with a contenteditable="false" property show they have been selected and are deleted when the Delete or Backspace key is pressed, as expected.

uploadImages no longer triggers two change events if there is a removal of images on upload

Previously, if an image failed to upload and was flagged for removal, the flagging triggered a second change event, which, in turn, changed the undo stack.

Given the most common, by far, reason for immediately deleting an uploaded image is the uploaded image being the incorrect image, this was undesirable behavior.

This update adds a new dispatchChange API (see below) which can take a change event and alter the current undo level without putting the changed undo level on to the undoManager stack.

uploadImages uses this new API in this circumstance and, as a consequence, uploading and immediately deleting an image now only generates one change event.

The selection is no longer incorrectly moved inside a comment by the editor.selection.normalize() API

Previously, if a TinyMCE editor had an HTML comment as its first element, the editor.selection.normalize() API set the selection to within the comment element.

Depending on how the editor was then made the current focus, this, invalid, selection location could result in TinyMCE throwing a JavaScript error in the host browser’s console.

With this update, TinyMCE now checks the initial selection location and resets it if is invalid.

Known issues

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

There are three known issues affecting TinyMCE 6.1.

Clearer focus states for buttons while navigating with keyboard does not work in older browsers

TinyMCE 6.1 introduced a new usability feature: a blue outline that more clearly highlights the currently active button when navigating TinyMCE dialogs with a keyboard.

This feature relies on the :focus-visible pseudo-selector.

This pseudo-selector is supported in current versions of all major browsers, but it is not supported in older browser versions.

Specifically, for :focus-visible to work, the following browser versions, or later, are required:

Browser Oldest supported version

Google Chrome

86

Microsoft Edge

86

Mozilla Firefox

85

Opera

72

Safari

15.4

Pasting a code sample over an extant code sample incorrectly sets the pasted code sample in <pre> tags

Code samples are placed inside contenteditable="false" blocks. These blocks can be copied and pasted but not directly edited.

A regression in TinyMCE 6.1, however, means that copying a code sample on to a code sample removes the contenteditable="false" block and sets the pasted material inside <pre> tags.

A workaround is to

  1. select and copy the code sample to paste.

  2. select the code sample to be pasted over;

  3. select Insert > Code sample…;

  4. select the text of the extant code sample as it presents in the Insert/Edit Code Sample dialog; and

  5. paste the copied code sample over this text.

  6. Click Save to close the Insert/Edit Code Sample dialog with the pasted-over text in place.

This known issue has been addressed in TinyMCE 6.1.2, released on Wednesday, August 3rd, 2022.

The Show comments toolbar button is not highlighted when comments sidebar is loaded at TinyMCE initialization

If a TinyMCE instance presents a toolbar which includes a Show comments button — toolbar: "showcomments", — this button is highlighted when the Comments sidebar is visible.

However, in TinyMCE 6.1, if the Comments sidebar is set to show at initialization — sidebar_show: 'showcomments', — the Show comments button does not highlight.

There is no workaround per se, but clicking the Show comments button twice (to hide and then re-display the Comments sidebar) does set the button to highlight, correcting the display error.

This known issue has been addressed in TinyMCE 6.1.2, released on Wednesday, August 3rd, 2022.