TinyMCE 6.3

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.

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:

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.

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.

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

Checklist 2.0.2 includes one fix:

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

Comments 3.2.0 includes one fix and one change:

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:

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:

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

Spelling Autocorrect 1.0.1 includes one fix:

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.

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.

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.

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

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

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.

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.

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.

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

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:

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

will be automatically turned into

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.

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

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.

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

For example in the following

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.

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.

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.

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.

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.

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.

CVE: CVE-2022-23494.

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.

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.

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.

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.

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:

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.