TinyMCE 6.3

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.3 was released for TinyMCE Enterprise and Tiny Cloud on Thursday, December 8th, 2022. It includes TinyMCE 6.3, additional changes to Premium plugins, and several new Premium plugins. These release notes provide an overview of the changes for TinyMCE 6.3:

New Premium plugins

Inline CSS 1.0.0

The TinyMCE 6.3 release includes the new Inline CSS premium plugin.

As is normal and long-time best practice, TinyMCE documents keep CSS and HTML separate. This practice is not, however, email-friendly.

The Inline CSS plugin takes a TinyMCE document, and processes it such that the previously separate CSS is applied inline to each HTML element. This single output file is much closer to the common requirements for sending as an HTML-formatted email.

For information on the Inline CSS plugin, see: Inline CSS.

Advanced Typography 1.0.1

The TinyMCE 6.3 release includes the new Advanced typography premium plugin.

The Advanced Typography plugin, depending on its setting, can replace common typewriter-style characters with their professional typesetter equivalents after the Advanced Typography button is pressed. This action will modify either the entire TinyMCE document or the text selected by the user.

For information on the Advanced typography plugin, see: Advanced typography.

There is one known issue in Advanced Typography 1.0.1:

Switching the Advanced Typography target language does not always work as expected

Selecting a language from the Advanced Typography toolbar button’s menu, runs the rules for the newly selected over the current TinyMCE document.

In some circumstances, switching the target language in this fashion does not result in typesetting changes as expected. This is most visibly apparent with quotation marks.

The British English typesetting norm is to use opening and closing single-quote marks to denote direct quotation: and .

The American English typesetting norm is to use opening and closing double-quote marks to denote direct quotation: and .

And one Spanish typesetting norm is to use guillemets, also known as comillas angulares, comillas francesas or chevrons, to denote direct quotation: « and ».

So, for example, if a TinyMCE document included a string thus:

"They went that way," he said, pointing.

Selecting English (US) from the Advanced Typography toolbar icon’s pop-up menu transforms the text, as expected, into

“They went that way,” he said, pointing.

Following this action by, then, selecting Spanish from the Advanced Typography toolbar icon’s pop-up menu, however, can result in the following incomplete typesetting change:

«They went that way, ” he said, pointing.

As of this release the only workaround is to not change Advanced Typography target languages after running any given target language’s rules over a TinyMCE document.

Accompanying Premium Plugin changes

The following premium plugin updates were released alongside TinyMCE 6.3.

Accessibility Checker 3.1.0

The TinyMCE 6.3 release includes an accompanying release of the Accessibility Checker premium plugin.

Accessibility Checker 3.1.0 includes the following fixes, additions, and improvements.

Merge Tags prefix and suffix elements were not ignored

Previously, Accessibility Checker incorrectly flagged Merge Tags prefixes and suffixes as presenting a contrast issue.

With this update, the Accessibility Checker plugin ignores Merge Tag prefixes and suffixes, as expected.

Added a new rule to show a warning when the alternative text of an image exceeds 100 characters

Accessibility Checker 3.1.0 now includes a rule that, when applied, shows a warning dialog when an image’s alternative (alt) text attribute exceeds 100 characters.

When the alternative text exceeds 100 characters, an Image alternative text should be less than 100 characters warning presents.

This dialog also presents the alternative text in an editable field, for immediate repair.

The discoverability of the question mark button in warning dialogs was improved

Many Accessibility Checker dialogs include a question mark icon. This icon is a link to further information about the discovered issue.

This update includes changes to the presentation of this icon to make discoverability as a clickable button more apparent.

The legibility of warning dialogs was improved

In concert with the changes noted above to the question mark icon in Accessibility Checker dialogs, legibility improvements were made to the presentation and typography of these dialogs.

The icon’s text was centered and the Issue, Warning, or Error sub-heading’s font size was reduced.

Additionally, borders were removed from the exterior of the description field and contrast colors were adjusted to match the background color of the icons added for this release.

Replaced the single warning icon presented in dialogs with icons specific to each alert level

Previously, all Accessibility Checker warning dialogs presented with a triangle warning icon, regardless of whether the alert was informational, a warning, or an error.

In TinyMCE 6.3, improvements for the accessibility checker were added to provide additional support for users when trying to identify different alerts such as info, warning or error icons.

In previous versions of TinyMCE the accessibility checker used the same triangle warning icon for all alerts when displayed. In TinyMCE 6.3, each alert type now displays a unique icon.

  • Warning alerts now display as an exclamation mark nested inside a yellow octagon.

  • Error alerts now display as an exclamation mark nested inside a red triangle.

  • Success alerts now display as a green tick.

For information on the Accessibility Checker plugin, see: Accessibility Checker.

Advanced Code Editor 3.1.0

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

Advanced Code Editor 3.1.0 includes the following improvement.

New option to display the Advanced Code Editor inline instead of in a dialog

In TinyMCE 6.3, the Advanced Code Editor plugin includes a new option, advcode_inline, that allows users to open the Advanced Code Editor within TinyMCE’s existing editor space instead of being displayed in a separate dialog box.

The basic setup for this new option as follows.

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "advcode",
  advcode_inline: true, // To use this option, set this value to "true".
  toolbar: "code",
});

Checklist 2.0.2

The TinyMCE 6.3 release includes an accompanying release of the Checklist premium plugin.

Checklist 2.0.2 includes one fix:

Checklist toggling did not preserve selection when used on an existing list

In previous TinyMCE versions, when selecting content over either an ordered or unordered list, then switching the list to a checklist, the user’s content selection was not preserved.

In TinyMCE 6.3, the user selection is now preserved when toggling a list to a checklist.

For information on the Checklist plugin, see Checklist.

Comments 3.2.0

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

Comments 3.2.0 includes one fix and one change:

A comment could be inserted when in an empty editor or block

In previous TinyMCE versions a bug existed that allowed comments to be placed into an empty editor or block.

With this update, the comments button, menu-item, comment sidebar and shortcut keys are now disabled when the editor contains no content.

The selection now expands to encompass the word containing the insertion point when a comment is added

TinyMCE 6.3 adds two new API functions — tinymce.selection.expand and tinymce.dom.RangeUtils.expand.

With these two functions available, if there is no selected text when a new comment is added, TinyMCE automatically extends the selection to encompass the word containing the insertion point and links the newly added comment to this automatically selected word.

For information on the Comments plugin, see: Introduction to Tiny Comments.

Merge Tags 1.1.0

The TinyMCE 6.3 release includes an accompanying release of the Merge Tags premium plugin.

Merge Tags 1.1.0 includes one addition, one fix, and one change:

New mceMergeTag command to wrap selected content in a merge tag

A new command, mceMergeTag has been added which can convert any selected text into a merge tag. This new command is available to use when defining Text Patterns.

Previously only a predefined list of merge tags could be used. When the new mceMergeTag command is added, any selected text can be converted into a merge tag.

As well, configuring the inline text_patterns with this command allows merge tags to be entered by manual typing.

Type the prefix, some content, the suffix, and then a word boundary character, and the mceMergeTag command will immediately wrap that content in a complete merge tag.

In the following example, the Merge Tag prefix and suffix are the default, {{ and }}

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'mergetags',
  text_patterns: [
    { start: '{{', end: '}}', cmd: 'mceMergeTag' }
  ],
  mergetags_list: [
    {
      value: 'merge.tag',
      title: 'A merge tag.'
    },
  ],
  toolbar: 'mergetags',
});

In this example, typing {{string}} followed by a word boundary character (such as a space, full-stop, question mark or comma) will result in the string being turned into an active merge tag.

Merge tags cannot exceed 255 characters in length

In TinyMCE 6.3 a new character limit was introduced: merge tags cannot, now, exceed 255 characters.

With this change, all merge tags are now subject to this limit including those predefined in the mergetags_list option.

In TinyMCE 6.3, to support this feature, the editor will check all merge tag lengths to ensure they do not exceed 255 characters.

In the event the merge tag length exceeds this, the item will be inserted as plain text.

Some non-ASCII characters or Unicode codepoints count as more than one character.

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

Spell Checker Pro 3.1.1

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

Spell Checker Pro 3.1.1 includes one fix:

Spell Checker Pro could search outside of the TinyMCE editor for a language match

For spelling, a word’s language was identified by finding the nearest lang attribute anywhere in an ancestor HTML element to the word (ie, any elements that contain the word).

When TinyMCE was running in Inline mode, that ancestry included HTML ancestors extant outside the TinyMCE editor instance.

If a lang attribute existed anywhere in that ancestry, this ancestral lang attribute value overrode all attempts by the user to set the spell checking language for the document.

As of TinyMCE 6.3, the lang attribute inherits the default settings for the TinyMCE editor body. As a consequence, the editor no longer searches elements external to the editor body when searching for lang attributes.

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

Spelling Autocorrect 1.0.1

The TinyMCE 6.3 release includes an accompanying release of the Spelling Autocorrect premium plugin.

Spelling Autocorrect 1.0.1 includes one fix:

Fixed format changes at the start of sentences when auto-capitalization was on

When Spelling Autocorrect was active and had Capitalization enabled (ie had autocorrect_capitalize: true set), any inline formatting applied at the beginning of a new sentence, after a full stop (period) but before the start of the word, would be lost when the word was auto-capitalized. Instead, the format at the end of the previous sentence was incorrectly applied.

This update to the Spelling Autocorrect premium plugin includes changes to the Spelling Autocorrect logic that prevent this.

As a consequence, formatting is now retained when the word is capitalized, as expected.

Accompanying Premium Skins and Icon Packs changes

The TinyMCE 6.3 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:

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

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

Improvements

TinyMCE 6.3 also includes the following improvements

The Text color and Background color menus now display a check mark denoting the currently selected color

Previously, the color swatches displayed when the Text color and Background color menus were opened gave no indication as to whether or not the Text color or Background color of the current selection was one of the colors displayed in these menus.

With this update, when the selected text’s current Text color or Background color matches one of the colors available from the appropriate color swatch menu, a check mark (the ✔️ character, also known as a tick) displays over that color.

Text color and Background color toolbar menus now pre-select the color for the selected text or insertion point position.

TinyMCE 6.3 included an improvement to the Text color or Background color menus that allows the user to identify the pre-populated color for the selected-text: a checkmark (also known as a tick or tickmark) displayed over the color that matches the currently selected Text color or Background color.

In addition to this, in TinyMCE 6.3, getCurrentColor checks for the first found backcolor and forecolor color before the parent color, based on the current selection or insertion point position.

As a consequence, when either the Text color or Background color toolbar menus are opened, if the selected Text color or Background color matches one of the colors available from the appropriate color swatch menu, that color is pre-selected.

Additions

TinyMCE 6.3 also includes the following additions:

New expand functions added to tinymce.selection and tinymce.dom.RangeUtils which expand the selection around the nearest word.

TinyMCE 6.3 introduced two new API functions that allow a user to select a word from the insertion point location which applies a new expand feature.

The tinymce.selection.expand API function allows TinyMCE users and developers to expand the selection range to contain the entire word when the selection is collapsed within the word.

The tinymce.selection.expand method expands the selection over the entire selected word, while the tinymce.dom.RangeUtils.expand method returns a range expanded over an entire selected word.

These new API functions are implemented to improve the selection of whole words in the Comments plugin. If, in the following example, a user places the insertion point between the first and second m in the word, comment, then clicks the Add comment toolbar button, or selects Insert > Add comment from the TinyMCE menu, or presses the Add comment keyboard shortcut (eg ⌘+⌥+M) —

<p>
  <span class="mce-annotation tox-comment"
    data-mce-annotation-uid="mce-conversation_58585987121669010253247"
    data-mce-annotation="tinycomments">
      Comment
  </span>
</p>

— TinyMCE 6.3 will automatically expand the selection to include the whole word, ‘Comment’.

New color_map_foreground and color_map_background options store custom colors selected using the Text color and Background color menus.

TinyMCE 6.3 has two new and separate color palettes — color_map_foreground and color_map_background — for custom Text colors and custom Background colors.

When custom colors are selected from the Text color or Background color menus, these colors are now stored in these separate color palettes, color_map_foreground and color_map_background, respectively.

When chosen, these custom colors are still added to the Text color and Background color menus. But they are now stored separately from the default color sets used by both menus.

When a user adds a custom color to the color_map_background palette, the editor does not replicate the new color in the color_map_foreground palette.

Added optional storageKey property to colorinput component

TinyMCE 6.3 introduced two new color palettes for color_map_background and color_map_foreground.

This addition introduced changes to the colorcache: it is no longer considered a singleton. The colorcache can now be accessed with the help of a custom ID, which can now create custom color_map colors, selected by the user to be assigned to either the backcolor or forecolor palettes separately.

To accompany this, TinyMCE 6.3 now allows for the creation of a separate storageKey property for the pre-provided colors in color_map_forground and color_map_background respectively. storageKey properties can also be set to color_cols, the colorinput component, and colorswatch.

If no separate values are set for color_map_forground and color_map_background, they still default to the shared or previous values as before.

A new addView API was added to editor.ui.registry

The new addView API registers a new view container.

This container, which is off (hidden) by default, is attached to the main view.

In this default state, the main editor view is shown and the addView-specific view is hidden.

When addView is turned on, the main editor view is hidden, and the addView-specific view is shown.

Accompanying this new API is a new ToggleView command.

The ToggleView command can, as its name suggests, toggle view visibility.

As well, the ToggleView command can be queried for its current state.

New color_default_foreground and color_default_background options to set the initial default color for the forecolor and backcolor toolbar buttons and menu items.

TinyMCE 6.3 adds a new feature that allows the default color for the icons in the foreground color and background color toolbar buttons to be pre-defined.

The color_default_foreground and color_default_background colors are options that take strings.

In the example below, the foreground color is set to red and the background color is set to a shade of cyan.

As the example shows, these colors can be defined by either name or hex #.

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  color_default_background: 'red',
  color_default_foreground: '#0DEDFF',
  toolbar: 'forecolor backcolor fontsize'
});

Placing block elements inside anchor tags is now supported

Previously, TinyMCE only supported placing inline elements — such as <strong></strong> or <code></code> — inside anchor tags

TinyMCE 6.3 adds support for wrapping anchor tags around block level elements.

For example, the following is now supported:

<a href="https://example.com/"><p>Link text inside <code>&lt;p&gt;</code> tags.</p></a>

Added ToggleToolbarDrawer event to subscribe to toolbar’s opening and closing

TinyMCE 6.3 includes a new event, ToggleToolbarDrawer, to subscribe to the toolbar’s opening and closing actions.

This new event passes {state: true} if the toolbar is visible and it passes {state: false} if the toolbar is invisible.

Changes

TinyMCE 6.3 also incorporates the following changes:

Keyboard navigation in the Text color and Background color menus now starts on the currently selected color if that color is present

In TinyMCE 6.3, getCurrentColor now checks for the first found backcolor and forecolor color before the parent color, based on the current selection or insertion point position.

As a consequence, when either the Text color or Background color toolbar menus are opened, if the selected Text color or Background color matches one of the colors available from the appropriate color swatch menu, that color is pre-selected and navigating through the available colors using arrow keys on the keyboard starts from this pre-selected color.

setContent is now allowed to accept any custom keys and values as a second options argument

In TinyMCE 6.3, changes have been made to the setContent API that now allows the editor to accept any custom [key: string]: (value) any; as a second option argument when the user inserts content.

The provides more flexibility with the getContent and setContent features.

New tests have been added to the setContent feature in TinyMCE 6.3 that now check if content manipulation in BeforeSetContent callback is possible so it can pass the custom data object to the getContent feature, allowing it to set both the content and action events.

Bug fixes

TinyMCE 6.3 also includes the following bug fixes:

Parsing media content would cause a memory leak, which for example occurred when using the getContent API

A memory leak occurred in Chrome, Edge and Firefox browsers when media content was parsed into the editor using the tinymce.activeEditor.getContent() method API.

The memory leak caused an abnormal behavior that increased the memory requirements of the editor until the active tab in the browser crashed.

This memory leak has been reported as Memory leak with DOMParser parseFromString method in the Chromium bug tracker.

A fix that prevents TinyMCE being affected by the leak has been included in TinyMCE 6.3.

Dragging a noneditable element toward the bottom edge would cause the page to scroll up

A regression was found in TinyMCE 6.2 where dragging an element containing a contenteditable=false attribute towards a document’s edge did not cause scrolling.

It was also found that dragging elements containing a contenteditable=false attribute toward the bottom edge causes similar behavior. In this instance, however, when the elements containing a contenteditable=false attribute was dragged to the bottom of the page the editor would sometimes scroll up.

This regression has been addressed in TinyMCE 6.3. Dragging elements containing a contenteditable=false attribute towards a document’s edge causes the viewport to scroll as expected. And dragging elements containing a contenteditable=false attribute toward the bottom edge of the editor no longer causes the page to scroll up.

Range expanding capabilities behaved inconsistently depending on where the insertion point was placed

When the ExpandRange.ts:expandRng() function is given a range, it is expected to select the next word whether the range begins before or after the word. Previously, however, this was discovered to not be the case.

Fixes were applied to the tinymce.activeEditor.selection.expand() function which is responsible for directly affecting the white space next to a word that accompanies a space-separated instance.

In TinyMCE 6.3, the ExpandRange.ts:expandRng() function now behaves as intended with any element such as text, special character, styles or elements with contenteditable="false” attributes. Regardless of where the insertion point is placed, the function, when given a range, now selects the word as expected.

Compilation errors were thrown when using TypeScript 4.8

TinyMCE 6.3 includes updates to the latest rollup-plugin-dts version to pull in a fix that was generating invalid generics. The update also allowed for a transition from Typescript 4.7.4 to Typescript 4.8.3, which, further, fixed compilation errors that were occurring.

Line separator scrolling in floating toolbars

In TinyMCE 6.0.3 the background images in the floating toolbar followed the scroll position of any nested scrolling containers when the editor width was reduced by the browser. By default, however, the background images should scroll with the main scrollable element, <body>.

As a consequence, the divider lines that act as background image to improve the UI would not follow the scroll position of any nested containers inside the floating toolbar.

In TinyMCE 6.3 background images now scroll with the toolbar’s content as expected.

A double bottom border appeared on inline mode editor for the tinymce-5 skin

The inline-mode toolbar showed an additional border line with TinyMCE 6.x premium skins that used TinyMCE 5.x skin packages.

With TinyMCE 6.3, all TinyMCE premium skins were updated and the additional border line no longer presents.

The editor header showed up even with no menubar and toolbar configured.

In classic mode, when both the TinyMCE toolbar and menubar were disabled, a header was still visible at the top of the editor.

In TinyMCE 6.3 this header no longer presents when the TinyMCE toolbar and menubar are disabled, giving the editor a cleaner appearance with only the content editor visible.

Inline text pattern no longer triggers if only the end pattern matches and similar inline text pattern matches are now managed correctly.

TinyMCE supports the automatic styling of basic Markdown-style markup syntax. For example, typing

This is a **bold** step.

will be automatically turned into

<p>This is a <strong>bold</strong> step.

and will be displayed accordingly.

In providing this support, TinyMCE uses text_patterns.

Previously, to check if something matched a supported pattern, TinyMCE first searched for the end pattern (ie, in the example above, the trailing **), then searched for the starting pattern (ie, in the example above, the leading **, then checked the offset to establish if the leading pattern was, in fact, a leading pattern.

However, the previous logic for determining offset could, in some circumstances, cause inline formatting to be either applied when not expected and not applied when expected.

In TinyMCE 6.3 the mechanism now checks the text patterns only and applies the closest match based on said text patterns.

The context toolbar prevented the user from placing the cursor at the edges of the editor.

When scrolled past the top row of a table, the table context toolbar overlapped any rows at the top of the editor to display below the toolbar.

In TinyMCE 5.x, the context toolbar switches from being at the top of the editor, to the bottom of the table or editor when a user attempted to select cells close to the top row of the table. And vice versa when the context toolbar was docked to the bottom of the editor.

In TinyMCE 6.x, the height of the context toolbar was increased, while the distance from which it needed to be selected in order to switch locations was not.

With TinyMCE 6.3 this distance has been increased. This allows the context toolbar to correctly switch locations when a user selects cells close to the toolbar, allowing the top or bottom visible rows of a table to be selected without issue when the context toolbar is visible.

The Quick Insert context toolbar provided by the quickbars plugin showed when the cursor was in a fake block caret

The Quick Insert context toolbar, provided by the Quick Toolbars plugin, was displayed when the cursor was moved to the left of an element with a contenteditable="false" attribute.

This behavior was unexpected because the Quick Insert context toolbar should not present when the insertion point is placed on a line with content.

The root cause was the insertion point being placed into a fake block caret, which was not considered by the logic for toggling the Quick Insert context toolbar.

A fix was applied to the logic to ensure it could handle such cases, and prevent it from showing in this circumstance.

When running on Firefox, the editor.selection.getRng() API was not returning expected values on hidden editors

In contrast to other supported browsers, Firefox did not return the selected object or the selection range from iframes that are hidden by the display: none attribute.

As a consequence, when a TinyMCE instance was running on Firefox, the window.getSelection() API for an iframe returned null if the iframe was hidden. This, further, resulted in the editor.selection.getRng() and editor.selection.getBookmark() APIs returning incorrect data from hidden editors when Firefox was the host browser.

This has been fixed in TinyMCE 6.3. All browsers, including Firefox, now return the correct values even when the iframe is hidden.

Dragging a noneditable element before or after another noneditable element now works correctly

Elements that had the contenteditable="false" attribute set could not be dragged to the left of an ancestor element.

For example in the following

<p>Text in a paragraph tag with a span of <span contenteditable="false">non-editable text</span> inside.</p>

the string non-editable text could not be dragged to before the opening <p> tag.

TinyMCE 6.3 can place a fake insertion point next to elements with a contenteditable="false" attribute when another element with a contenteditable="false" attribute is dragged, allowing the object to be moved before and after other such elements.

The restored selection or location after a redo or undo action was not scrolled into view

Prior to the TinyMCE 6.3 release, executing an undo or redo function in the editor did not scroll the editor to the new insertion point or selection, should the undo or redo result in the insertion point or selection being out of the current viewport.

Instead, users had to manually scroll to the insertion point or selection after issuing an undo or redo command that resulted in the insertion point or selection being out of view.

As of the TinyMCE 6.3 release, the scroll function now repositions the insertion point to the last known undo or redo location.

A newline could not be inserted after an inline element with a contenteditable="false" attribute was created

In previous versions of TinyMCE, a newline could not be inserted when the selection was restored from a bookmark positioning after adding an inline element with a contenteditable="false" attribute.

This was most commonly seen by pressing the Return (or Enter) key not moving the insertion point to a new line after a merge tag was created in the editor.

For TinyMCE 6.3, a fix was applied to the core SelectionOverrides settings to ensure the user selection restores from the bookmark positioning before and after an inline element with a contenteditable="false" attribute is created.

Hitting the Return (or Enter) after creating a merge tag now moves the insertion point to a new line, as expected.

Inline mode did not respect the content_css_cors option

In previous versions of TinyMCE, the tinymce.dom.styleSheetLoader global was not configured by the content_css_cors option, when specified.

Consequently, stylesheets loaded by TinyMCE onto the outer document page did not have the crossorigin="anonymous" attribute. This particularly affected TinyMCE instances running in inline mode, because the tinymce.dom.styleSheetLoader global is used to load stylesheets used by inline editors. (Stylesheets for TinyMCE editors running in iframe mode are specific to the editor.) Without the crossorigin="anonymous" attribute being set, no external stylesheets were loaded. And inline editors with the pageembed plugin loaded and the tiny_pageembed_inline_styles option set to true would, as a result, return an error when attempting to insert any iframes through the dialog.

As of TinyMCE 6.3, the content_css_cors option now configures the tinymce.dom.styleSheetLoader global when specified. This allows the crossorigin="anonymous" attribute to be added to all stylesheets loaded by the editor — including editors running in inline mode — when the option is set to true.

The insertion point moved to the previous line when a text pattern executed a mceInsertContent command on Firefox

In previous versions of TinyMCE, when running on Firefox and after pressing Enter or Return to execute an mceInsertContent command (to, for example, add a merge tag to a TinyMCE document), text_patterns moved the insertion point to the previous line.

This error has been corrected in TinyMCE 6.3. When running TinyMCE 6.3 on Firefox and creating a merge tag using mceInsertContent, pressing Enter or Return to generate the desired merge tag moves the insertion point to the end of said newly-created merge tag, as expected.

The autoresize plugin caused the editor area to infinitely resize when content_css was set to document

The document skin’s CSS aligns the bottom of the content area to the bottom of the editor, but does not set anything for autoresize_bottom_margin. As a consequence the TinyMCE editor takes the default value for this attribute: 50.

Simulaneously, everytime the resize function calculated the editor size it added this autoresize_bottom_margin value.

Since, however, the aligning CSS sets the bottom of the content area to a value incrementally less than the autoresize_bottom_margin value, the resize function went into a loop.

Consequently, and as per the example below, if a TinyMCE instance was setup with the Autoresize plugin active and content_css set to document, the editor increased its height indefinitely.

tinymce.init({
  selector: 'textarea',
  plugins: 'autoresize',
  content_css: 'document',
});

With this update, TinyMCE now checkes for the resize function going into a loop. And, if it does so, the function treats the margin bottom as always 0 instead of the autoresize_bottom_margin value. This changes the min-height of HTML and Body and prevents the infinite resizing.

Security fixes

TinyMCE 6.3 includes a fix for the following security issue:

A cross-site scripting (XSS) vulnerability was found in TinyMCE alerts

It was discovered that HTML being inserted into the DOM for presentation in TinyMCE alert and confirm dialogs was not being sanitized.

As a consequence, plugins that used the alert or confirm dialogs could be used to insert arbitrary JavaScript that would execute when an alert presented in the TinyMCE UI for the current user.

As of TinyMCE 6.3, HTML being provided to the DOM for presentation in TinyMCE alert and confirm dialogs is now sanitized before being added.

This sanitizing closes the XSS vulnerability.

Tiny Technologies would like to thank P4rkJW for discovering this vulnerability.

Known issues

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

There are several known issues in TinyMCE 6.3.

The More button can disappear from the TinyMCE toolbar when exiting the inline code editor

When the More button in the TinyMCE toolbar is open (ie, is set to display all of a multi-line toolbar), opening and closing the Advanced Code Editor in inline mode can cause the More button to disappear.

Specifically, when TinyMCE 6.3 is running advcode_inline: true and toolbar_mode: sliding specifically the More button disappears after clicking on the Cancel button in the Advanced Code Editor viewport.

This only occurs when the toolbar is forced into a viewport small enough to render the More toolbar button inside the editor. As in the example below, which sets the viewport width to be less than the toolbar width.

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  width: 400,
  plugins: 'advcode',
  advcode_inline: true,
  toolbar_mode: 'sliding',
  toolbar: 'undo redo | styles | bold italic underline strikethrough | code'
});

A workaround does exist to resolve this issue: if the More button disappears, re-sizing the editor viewport forces it to re-display. Switching to Full Screen mode and back counts as re-sizing for this workaround’s purposes.

In Safari 16.1, the ‘Click for more info’ button in Accessibility Checker dialogs is not outlined when made active

Accessibility Checker dialogs for accessibility Errors and Warnings include a Click for more info button: a colored square containing a circled question mark.

When this button is navigated to using keyboard navigation, the button is highlighted and a blue outline appears around the highlighted button.

When Safari 16.1 is the host browser for a TinyMCE instance, the Click for more info button highlights, but the blue outline does not present when this button is navigated to using keyboard navigation.

This is a presentation issue only. The Click for more info button still works as a button in Safari 16.1, responding as expected when it is clicked or pressed, or when the Return key is pressed after navigating to the button using the Tab key.

There is, as of this release, no specific workaround.

If the Click for more info button is navigated to using the Tab key, and then the Return key is pressed to activate the button and load the more information page, the blue outline does appear in Safari 16.1 after the Return key is pressed.

Checkmark over the current color is not displayed when ‘Text color’ or ‘Background color’ is accessed from the TinyMCE menu

The Text color and Background color commands set the color of the selected text and the background behind the selected text respectively.

Depending on the TinyMCE configuration, these commands can be accessed from the Format menu or from the TinyMCE toolbar, or both.

And, when selected text or the background behind selected text is set to one of the colors available from the swatch presented by both commands, a checkbox appears over that color when these commands are selected and the swatch is opened.

As of TinyMCE 6.3, however, this checkmark does not appear if the Text color or Background color commands are opened via the Format menu. The checkmark does, however, appear when the equivalent toolbar button menus are opened.

This presentation issue does not affect functionality. Selecting a new Text color or Background color, either via the Format menu or the toolbar, changes the selected text color or the selected text’s background color, as expected.

A workaround is to specify the Text color and Background color using the color swatch UI provided by the forecolor and backcolor toolbar buttons.

Checkmark over the current Background color is not displayed when inline formatting is applied in a certain order

If text in a TinyMCE document is formatted in the following order, the checkmark over the currently active background color does not display in the Background color swatch menu:

  1. Apply inline formatting, such as Bold or Italic.

  2. Apply a Text color

  3. Apply a Background color

This presentation issue does not affect functionality. Selecting a new Background color, either via the Format menu or the toolbar, changes the selected text’s background color, as expected.

A workaround is to apply inline formatting after applying the Text and Background color. When the inline formatting is applied after the Text and Background colors are applied, the presentation error does not occur.

This checkmark presentation issue occurs in conjunction with the similar checkmark presentation issue documented above. When this presentation issue occurs, the checkmark does denote the current background color in either the Background color menu or toolbar item.