TinyMCE 7.1

The new versions of the server-side services provide updates for the Java-based server-side components. To deploy the updated version of the server-side components:

For information on:

The new Premium plugin, Math, provides a way for users to insert complex formulas.

For information on the Math plugin, see: Math.

The TinyMCE 7.1 release includes an accompanying release of the Mentions premium plugin.

This Mentions release includes the following fix.

The TinyMCE 7.1 release includes an accompanying release of the Enhanced Code Editor premium plugin.

The Enhanced Code Editor includes the following fix:

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

Accessibility Checker includes the following improvement.

The TinyMCE 7.1 release includes an accompanying release of the Revision History premium plugin.

Revision History includes the following improvement.

TinyMCE 7.1 introduces a new diff API from the Revision History plugin. This API allows the the user to compare two HTML strings. It does this by marking changes with annotations, so you can easily identify what’s been added, removed, or changed.

For information on the Revision History plugin, see: Revision History.

Previously, using itemprop, itemscope and itemtype as valid HTML5 attributes within the editor was not supported.

As a consequence, users faced difficulties in effectively working with content that used these attributes resulting in compatibility issues or data misrepresentation.

TinyMCE 7.1 addresses this issue, now, the missed attributes have been added to the HTML5 schema, ensuring that users can now use content containing these attributes such as;

As a result, itemprop, itemscope and itemtype are now considered valid HTML5 attributes within TinyMCE.

In previous versions of TinyMCE, an accessibility issue was identified that affected keyboard-only, specifically when a user receives a notification and they where unable to close it using the keyboard.

As a consequence, users who rely on keyboard navigation or screen readers could only close the notifications via mouse "Click".

TinyMCE 7.1 addressed this issue with the following changes:

As a result of these changes notifications now more accessible for all users.

Previously, integrating TinyMCE and its premium plugins necessitated the separate inclusion of the plugin.js file along with the corresponding resource API-loaded CSS files. This approach often led to complications due to inconsistent naming conventions for our CSS files, making bundling a cumbersome process.

To address this, TinyMCE 7.1 has included index.js files to each premium plugin, which will consolidate all necessary resources.

As a result, when bundling from a distribution bundle or .zip build, by including all the TinyMCE imports for each plugin such as in a all.js file for example;

all the specific plugins will load without the need of any additional resources.

For more information on bundling with TinyMCE, see bundling plugins

The color swatch menu item, which is accessible via Format > Text color menu, previously contained nested block elements with the same ARIA role ('menu') in its HTML structure, which violated ARIA standards.

TinyMCE 7.1 addresses this issue, by removing the duplicated role attribute, ensuring that the structure now aligns with ARIA guidelines and enhances usability for all users.

Previously, when custom_elements contained special characters such as colons, and these elements included a nested anchor element, an error would be thrown in the dev-console as the corresponding CSS selector was invalid due to the unescaped colon character.

TinyMCE 7.1 addresses this issue, now, the CSS selector properly escapes special characters like colons, ensuring its validity.

As a result, the error in the console is no longer displayed.

Previously, toggling a list into a paragraph that had a specific alignment style, did not retain the alignment state when the list was converted to the paragraph.

TinyMCE 7.1 addresses this issue, by ensuring that the style attribute of the list item being transformed into a paragraph is carried over to the new paragraph.

As a result, style attributes are now properly applied to the new paragraph after conversion when toggling lists.

Previously, when opening a custom view on small screens or mobile devices, like the Revision History view, some header buttons and UI components were not completely visible, and in some cases, they were not accessible. For example, users might not have been able to close the view because the Close button was obscured on smaller screens.

TinyMCE 7.1 addresses this issue by improving the layout’s responsiveness to maximize usability.

As a result, header buttons and UI components are more accessible and visible on small screens and mobile devices, ensuring that users can interact with the custom view without issues.

For more information, see the Custom views documentation.

In earlier versions of TinyMCE, a problem occurred when users inserted a video or media element into a TinyMCE document while using Safari as the host browser. The issue caused media files to be unplayable in Safari.

TinyMCE 7.1 resolves this problem by preventing events from propagating outside of the video element, which previously caused the playback issue.

With this fix, users can now play video and audio elements on Safari without any issues.

In earlier versions of TinyMCE, the Open link context menu action did not work when a link was part of a larger text selection. This meant that selecting a text block containing a link and then choosing Open link from the context menu would not result in any action.

With TinyMCE 7.1, this issue has been addressed. Now, when you select a block of text that includes a link and choose Open link from the context menu, the link will open in a new tab as expected.

In previous versions of TinyMCE, the "Open link" context menu action wasn’t available for links embedded in images. This limitation prevented users from using the context menu to open links directly from images, disrupting the usual workflow.

With TinyMCE 7.1, this issue has been resolved. The "Open link" context menu action is now enabled for links on images, allowing users to easily open them with a right-click.

Previously, in Windows High Contrast Mode, the colors of various elements in TinyMCE, such as toolbar icons, toolbar border, icon hover, focus, and active stage, were not correctly configured. This resulted in low to no color/contrast for the editor elements, leading to a poor user experience.

In this fix, the following elements have been given the correct configuration to be visible and display high contrast when Windows High Contrast mode is enabled:

The following item has been disabled when Windows High Contrast mode is enabled:

The following items now maintain their color when Windows High Contrast mode is enabled:

Additionally, the fix addresses the issue where the black background added to the placeholder text in Windows High Contrast mode was blocking the caret. The fix includes applying a z-index to the placeholder to unblock the caret and adding a specific color to the placeholder text when high contrast mode is enabled. This ensures that both the caret and placeholder text are now visible.

These changes improve the user experience in TinyMCE by making UI elements, icons, texts, and user actions clearly visible in Windows High Contrast mode.

Previously, there was inconsistencies across browsers in announcing the aria-label for the editor body when the host browser was Firefox.

As a consequence, the aria-label of the editor body was not announced. It was intended to be conveyed by the iframe_aria_text option but in this case, it was not being announced in Firefox, while Chrome and Safari functioned correctly.

TinyMCE 7.1 addresses this issue. Now, the iframe_aria_text option is set to the title of the iframe specifically in Firefox, to ensure screen readers announce the option across all browsers.

As a result, when navigating into the editor, screen readers in all supported browsers will now announce the correct label for the editor body.

In TinyMCE 6.4.1, a boolean skipFocus parameter for the ToggleToolbarDrawer command was introduced. This parameter manages whether the focus should be set on the overflow toolbar after it is toggled. However, a bug was identified with the ToggleToolbarDrawer command when used with {skipFocus: true}, specifically as editor.execCommand('ToggleToolbarDrawer', false, { skipFocus: true }).

As a result, the bug caused the command to behave inconsistently based on the toolbar mode:

TinyMCE 7.1 addresses this issue. Now, when using the ToggleToolbarDrawer command with the { skipFocus: true } argument in both toolbar_mode: floating and toolbar_mode: sliding, the command will toggle the toolbar drawer as expected while preserving focus.

In previous versions of TinyMCE, an issue was identified where VoiceOver was not announcing the dialog title when using the aria-labelledby attribute.

As a consequence, without announcing the dialog title, users who rely on screen readers would not be informed about the purpose of the dialog.

TinyMCE 7.1 addresses this issue. Now, Tiny’s approach to announcing dialog titles is by switching from using aria-labelledby to using aria-label directly on the dialog title element itself.

As a result, the aria-label attribute, VoiceOver will now announce the dialog title as expected.

Previously, when opening a notification containing a large amount of text or when one was displayed by the editor, the notification was not constrained to the width of the editor.

As a consequence, the notification popup would exceed the fixed width of the editor window.

In TinyMCE 7.1, this issue is resolved by ensuring that notifications do not exceed the width of the editor.

Previously, the dialog component’s title was wrapped in a <div> element, visually appearing as a heading and functioning as the main heading for the dialog. However, without the title being semantically marked up as a heading element, screen reader users may struggle to understand the purpose of the dialog box and navigate its content.

TinyMCE 7.1 addresses this issue by updating the dialog title markup to use an <h1> element, ensuring that the title is semantically identified as a heading. This improves the accessibility experience for users by helping screen readers and other assistive technologies understand the structure of the page and navigate its content more easily.

Previously, an issue was identified with the toolbar overflow button More button specifically in toolbar_mode: 'sliding' mode. The button uses the aria-pressed attribute, which is not appropriate for this scenario.

As a consequence, the aria-pressed attribute was set incorrectly, which prevented screen readers from announcing whether the additional toolbar was in either a expanded or collapsed state.

TinyMCE 7.1 addresses this issue. Now, the aria-pressed attribute has been replaced with aria-expanded attribute. This attribute will be set to true when the overflow content is visible and false when it’s hidden.

As a result, screen readers will now announce the expanded/collapsed state of the overflow toolbar correctly.

Previously, when using the editor in full screen with the Full Screen plugin active, users were still able to tab out of the editor window and access content behind it. This created an accessibility issue for keyboard-only users as the editor window could lose focus unintentionally, shifting it to elements outside the editor. Since these elements are hidden in fullscreen mode, keyboard users might have struggled to navigate back to the editor.

In TinyMCE 7.1, the Full Screen plugin has been modified to prevent users from tabbing out of the editor window while in full screen mode. Users are now confined to the editor window while in full screen mode, ensuring focus remains on the editor content and preventing accidental navigation away from the editing area.