TinyMCE 7.0

The new Premium plugin, Revision History, allows you to track changes made to content in the TinyMCE editor and restore previous versions of the content.

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

The new Premium plugin, Import from Word, provides a way to import .docx (Word documents) or .dotx (Word templates) files into the editor.

For information on the Import from Word plugin, see Import from Word.

The new Premium plugin, Export to Word, provides a way to generate a .docx file directly from the editor.

For information on the Export to Word plugin, see Export to Word.

The new Premium plugin, Export to PDF, provides a way to generate a .pdf file directly from the editor.

For information on the Export to PDF plugin, see Export to PDF.

The new Premium plugin, Markdown, detects pure markdown from a paste event within a TinyMCE editor instance and converts it to HTML.

For information on the Markdown plugin, see Markdown.

With the release of TinyMCE 7.0, the below plugins are adopting the following name changes.

The TinyMCE 7.0 release includes an accompanying release of the Templates premium plugin.

Templates includes the following improvement.

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

Enhanced Code Editor includes the following fixes, additions, and improvements.

Enhanced Code Editor provides the following shortcuts within the code dialog.

For information on the Enhanced Code Editor plugin, see: Enhanced Code Editor.

The open-source template plugin and associated config options have been removed in TinyMCE 7.0.

Customers using the template plugin will need to migrate to the premium 'advtemplate' plugin in TinyMCE 7.0, which contains all the functionality except some esoteric options.

For more information, see Migrating from TinyMCE 6 to TinyMCE 7.

The Enhanced Skins & Icon Packs release includes the following updates:

The Enhanced Skins & Icon Packs were rebuilt to pull in the changes also incorporated into the default TinyMCE 7.0 skin, Oxide.

Previously, basic and toggle toolbar buttons lacked keyboard shortcut information in the native browser tooltip. This could leave users unaware of available shortcuts and, therefore unable to use them.

To address this, TinyMCE 7.0, introduces custom tooltips for these buttons. These tooltips now clearly display the keyboard shortcut alongside the button’s description as follows:

See the Basic toolbar button, Toggle toolbar button and Keyboard Shortcuts documentation for more information.

Previously, collection items set in a collection dialog component would not display a tooltip on keyboard focus.

This means that keyboard-only users were not able to see the tooltip, as it was only shown on mouse hover.

In TinyMCE 7.0, dialog collection items with data-mce-tooltip attribute, such as those used in Emoticons and Charmap plugins, now display relevant tooltips on both mouse hover and keyboard focus. This ensures all users, including those relying solely on keyboard navigation, can access helpful information about these items.

Previously, the table ghost element did not accurately reflect changes in table height when resized using the corner resize handles.

In TinyMCE 7.0, this problem has been addressed.

As a result, the table ghost element now accurately mirrors adjustments in table height when resized using the corner resize handles.

Previously when attempting to insert a mention or emoji using an IME on Android and using Korean, users encountered an obstacle where it wasn’t possible to complete the insertion.

TinyMCE 7.0 addresses this issue, by rewriting the handler for autocompleter, ensuring that it no longer interferes with the DOM during composition with an IME.

As a result, users can now insert mentions and emojis using the autocompleter.

For information on the Autocompleter plugin, see: Autocompleter.

In previous versions of TinyMCE, buttons without visible labels displayed browser native tooltips which only shows on mouse hover, not keyboard focus. This meant keyboard-only users couldn’t access these tooltips, hindering their understanding of button functionality.

To address this, TinyMCE 7.0 introduces custom tooltips for various elements:

These custom tooltips appear on both mouse hover and keyboard focus, ensuring all users, including those relying solely on keyboard navigation, can access essential information about interactive elements.

The absence of a tooltip on the "Click for more info" button within the accessibility dialog rendered it inaccessible for keyboard-only users, affecting their ability to fully engage with the functionality.

TinyMCE 7.0 addresses this issue, by adding the tooltip to the button, ensuring its visibility both on mouse hover and keyboard focus.

TinyMCE 7.0 introduces enhancements to the existing custom_elements option and addCustomElements API. This update allows the structure of custom elements to be refined, offering users more flexibility and customization options.

Key Improvements:

For more information and details for addCustomElements see custom_elements.

Previously, when inserting a data element within the editor, the data element would be removed.

In TinyMCE 7.0, this problem has been addressed.

As a result, the data elements are recognized as valid elements within the editor, ensuring they are properly retained along with their value attributes.

This release introduces a new trigger property for block text pattern configurations, allowing pattern activation with either Space or Enter keys.

In TinyMCE 7.0 the default preconfigured text patterns was changed from:

to the following new preconfigured defaults:

For information on the text_patterns, see Text Patterns

Previously when using Autocompleter, the native browser tooltip was only shown on mouse hover, but not on keyboard focus.

This means that keyboard-only users were not able to see the tooltip, as it was only shown on mouse hover.

To address this in TinyMCE 7.0, custom tooltips have been implemented for autocompleter items.

Now, tooltips are now shown on autocompleter items both on mouse over and keyboard focus, providing visual indication for keyboard-only users.

TinyMCE 7.0 updates the valid_elements option and schema.addValidChildren function, which now support preset names such as @blocks, @phrasing, and @flow. These presets will be automatically expanded into corresponding lists of valid elements, simplifying the definition process.

For instance, specifying valid_children: 'custom-elm[@flow]' will configure the custom-elm element to accept any child element classified as a flow element. This streamlines the process of defining valid elements and eliminates the need to manually list all elements from the schema spec.

For more information on content filtering for custom elements, see custom_elements.

In TinyMCE 6.8.1, convert_unsafe_embeds editor option was introduced to allow object and embed elements to be converted by default to the correct element, respective of the MIME type, automatically when inserted into the editor.

In TinyMCE 7.0, the default value for convert_unsafe_embeds will change from false to true, meaning that all object and embed tags will automatically be converted to different elements when inserted to the editor. If this behaviour is undesirable, set convert_unsafe_embeds to false in your editor configuration.

For further details on the convert_unsafe_embeds option, see the content filtering options, or refer to the security guide, or the TinyMCE 6.8.1 release notes.

In TinyMCE 6.8.1, the sandbox iframes editor option was introduced to allow iframes to be sandboxed by default when inserted into the editor.

In TinyMCE 7.0, the default for sandbox_iframes will change from false to true, meaning that all iframe elements inserted into the editor will be given the sandbox="" attribute by default, preventing most actions, including scripting and same-origin access, which may break existing editor content or produce undesirable effects.

To prevent any expected iframes from being sandboxed, we recommend adding the source domains of such iframes to the new sandbox_iframes_exclusions option list, and including the domains in the default list where necessary. To prevent all iframes from being sandboxed, set the option sandbox_iframes to false in your editor configuration.

For further details on the sandbox_iframes option, see the the content filtering options, or refer to the security guide, or the TinyMCE 6.8.1 release notes.

In previous versions of TinyMCE (prior to version 7.0), the function DomUtils.isEmpty behaved inconsistently, considering elements with only comment nodes as non-empty.

As a consequence, elements visually appearing empty due to containing only comment nodes could lead to inconsistent behavior in caret placement and selection handling.

TinyMCE 7.0 addresses this issue, now, when using DomUtils.isEmpty, elements containing only comment nodes are correctly recognized as empty.

As a result, caret placement and selection handling within elements containing only comment nodes now behave consistently.

In TinyMCE 6.4, the option highlight_on_focus was introduced, that provides a blue outline to an instantiated TinyMCE editor when the editor is in focus.

As of TinyMCE 7.0, the default value of this has now been set to true.

For more information about highlight_on_focus see the highlight_on_focus option.

The height field within the table plugin cell dialog has been removed, thereby restricting the ability to adjust individual cell heights td/th.

However, this modification directs users to utilize the table plugin row dialog to alter the height of entire rows along with all enclosed cells.

When resizing a table using either the row resize bars or corner resize handles, any existing height styles are removed from the td/th elements and only apply to tr elements and table element. Additionally, the heights calculated and applied for the tr elements and table element more accurately represent the actual visual height in the editor.

As part of the changes to table height resizing handling, resizing via the corner resize handles is more consistent. If the table does not have any height styles and the table is resized using one of the corner resize handles, each row has its height increased evenly. If the table does have existing height styles, corner resizes will only change the height of the first row (if using top corner handles) or last row (if using bottom corner handles) equivalent to table_column_resizing: 'resizetable' option for columns Table options: table_column_resizing

Previously, when the placeholder option was set, the editor would automatically append an aria-placeholder attribute to the editor body.

However, the aria-placeholder attribute is not a valid attribute for the body element according to accessibility guidelines. As a result, certain screen readers and assistive technologies encountered difficulties in correctly interpreting the content.

In TinyMCE 7.0 addresses this, by removing the aria-placeholder attribute from the editor body. This solution ensures that the editor is accessible to all users.

Previously, the DialogFooterToggleButton component required a tooltip property. This meant including a tooltip for all toggle buttons displayed in dialog footers, even if the information wasn’t necessary.

As of TinyMCE 7.0, the tooltip property is now optional for DialogFooterToggleButton. This flexibility allows developers to omit the tooltip for buttons where it’s not required, providing a cleaner and more focused user experience.

In TinyMCE 6, the media_url_resolver option used a callback rather than a promise, which lead to unforeseen consequences.

To rectify this, all instances of media_url_resolver were refactored to utilize promises.

As a result, this fix not only standardized the codebase but also significantly enhanced error handling.

For more information on using media_url_resolver, see media_url_resolver

Previously, the bespoke styles select toolbar button in TinyMCE defaulted to "Paragraph" as the selected option even when there was no actual "Paragraph" style configured.

TinyMCE 7.0 addresses this, the fallback option for the bespoke styles toolbar button has been reverted to "Formats" in situations where the "Paragraph" style is not defined in the style_formats option. This ensures a more accurate reflection of available styles.

Previously in TinyMCE 6, all colors in the content HTML were set to use rgb values by default. As the common practice is using hex values this change has been reverted.

As a result, in TinyMCE 7, all colors are converted to use hex values and the forced_hex_color option is removed. The exception being rgba color values, they are left as is.

For more information, see Migrating from TinyMCE 6 to TinyMCE 7.

Previously, native list commands could be executed by various text patterns.

This resulted in undefined browser behavior due to the inherent list code within it.

TinyMCE 7.0 addresses this, by removing the core list commands, effectively eliminating the insertion of lists into the content.

As a result, users no longer experience unexpected list insertions.

Previously, the ch configuration property was used to specify the character that would trigger the autocompleter.

This property was deprecated in TinyMCE 6.2 and has been removed in TinyMCE 7.0. Instead, use the trigger property to specify the string that will trigger the autocompleter.

If editor.ui.registry.addAutocompleter(name, options) was used in your configuration, updating your configuration from ch: '<string>', to trigger: '<string>', is required.

For more information, visit the updated Autocompleter documentation.

To improve keyboard navigation and accessibility in TinyMCE 7.0, notifications have been standardized by removing the ability to customize the presence of a close button. This change ensures a consistent tabbing order across different notifications.

As a result, the close button is now a standard feature in all notifications. Any customizations or configurations related to the closeButton setting will no longer affect the functionality of notifications.

Previously, when deleting a row or column in a table within TinyMCE, the caret or cursor position would relocate to the first cell of the table.

As a consequence, users expected it to be repositioned much closer, such as to an adjacent cell in the previous row or column.

In TinyMCE 7.0, this issue is addressed, now, when a user deletes a row or column in a table, the caret/cursor position is now relocated to the adjacent cell in the previous row or column.

With the release of TinyMCE 6.8, applying heading formatting to the content within the <summary> element was introduced. However, an issue was identified: if the caret was positioned between words, the editor’s selection expand range functionality would not expand the selection to include the entire content within the <summary> element.

As a consequence, the heading formatting was partially applied to some of the content within the <summary> element.

TinyMCE 7.0 addresses this issue, now, updates were made to the editor’s selection expand range functionality.

As a result, the heading format is applied to the entire content within the <summary> element, regardless of the carets location.

In TinyMCE, an issue was identified where clicking outside the editor while a menu was in either the opened or closed state resulted in the blur event not being triggered as expected.

Consequently, the blur event was not dispatched when switching focus outside the editor, as the UI was still considered part of the editor.

TinyMCE 7.0 addresses this by now considering UI events as part of the normal editor events.

As a result, the blur event is now properly dispatched when switching focus outside the editor.

Previously in TinyMCE, the autocomplete feature did not properly interrupt or consider composing mode for keyboards when typing in Korean.

For example, when typing 'neko' with Korean keyboard the following states will be passed through:

As a consequence, the autocomplete feature triggers as the composition mode changes from ㅜ to ㅜㄷ, with ㄷ being in composing mode. While it copies the text into a new element, it disrupts the composing mode. As a result, when typing k, nothing appeared to happen, although in the background, the composing mode actually changes to 다. Then, when o is pressed, the content of the composing mode is added, and the new character is put into composing mode instead, resulting in the text ㅜㄷ다ㅐ.

TinyMCE 7.0 addresses this issue by, now avoiding DOM mutation during IME composition, ensuring uninterrupted composition sessions without introducing new elements to the DOM.

Previously when toolbar_persist and inline mode was set to true, the toolbar could be shown before the skin was loaded. Whereas now it will always wait for the skin to load first.

Previously, it was not possible to remove all classes on a table when setting an empty value in the table_class_list option and using the "Class" listbox field in the "Table Properties" dialog.

TinyMCE 7.0 introduces improvements for handling and removing classes on table, row and cell elements, including:

In previous versions of TinyMCE, two issues where identified that affected list properties for <ol><li> tags:

As a consequence, since the selection is still on the first element, the List Properties…​ context menu item was disabled.

TinyMCE 7.0 addresses this issue, now when the user opens a context menu, TinyMCE creates a new bookmark to avoid the jump back.

As a result, the selection is in the correct place and the List Properties…​ context menu item is enabled.

Previously when using quicklink, the link_default_target value was not being considered.

As a consequence, the target attribute would not be applied to links created using quicklink.

TinyMCE 7.0 addresses this issue, now, the quicklink has been enhanced to consider the link_default_target value.

As a result, if a link_default_target is specified, quicklink will appropriately incorporate it when creating a link.

Previously when shrinking the inline editor, the top position of the toolbar was calculated before wrapping the toolbar into multiple rows.

As a consequence, the additional rows in the wrapped toolbar would cover the editor content.

TinyMCE 7.0 addresses this issue, now, the editor shrinking is applied before calculating the top position of the toolbar.

As a result, the truncated toolbar is correctly displayed above the editor content.

Previously in TinyMCE, when a details element was placed inside a list item and contained an empty summary, pressing the Backspace key (with the cursor at the beginning of the summary) resulted in the summary being deleted.

This caused the unexpected behavior of replacing the summary contents with the default summary placeholder.

To address this, the summary element has been included in the list of non-empty elements within the editor’s schema.

With this adjustment, the summary element will no longer be deleted under the previously mentioned conditions.

Previously in TinyMCE, the inline editor’s toolbar width was calculated using the outerContainer width.

Consequently, the toolbar was given a width of 0, resulting in the toolbar collapsing to the minimum width.

TinyMCE 7.0 addresses this issue, now, a check has been introduced to prevent the adjustment of the toolbar’s width if the calculated value is 0.

As a result, the inline editor now correctly displays the toolbar’s width when positioned inside a scrollable container.

As a consequence, this would result in the menubar and/or the toolbar to be squashed when the host browser was operating over a relatively slow connection.

TinyMCE 7.0 addresses this issue, now, the toolbar is no longer squashed in inline mode with toolbar_persist enabled, when the page takes longer to load the skin.

Previously in TinyMCE, the inline mode event_root option incorrectly used an object processor.

This caused the option to be unregistered when passing a string value, resulting in the option being unusable.

TinyMCE 7.0 addresses this, now, the event_root option uses the correctly uses the string processor.

As the result, the event_root option can now be correctly used to specify a CSS selector for an element.

Previously in TinyMCE, there was an issue with selection.setContent when using certain tags (such as pre) as the parent element. The selection would not recognize that it was at the end of the line, resulting in an error when trying to insert a new line afterwards.

TinyMCE 7.0 addresses this issue. The selection now correctly recognizes that it is at the end of the line when using selection.setContent. As a result, the insertion of a new line behaves as expected.

An issue was identified where the floating toolbar’s functionality, specifically regarding the incorrect rendering of the overflow button on a second row when the window was resized or the browser was zoomed.

Previously, when the toolbar contained more buttons than could be displayed within the available space, an overflow button (depicted by three dots) …​ would appear at the toolbar’s end, enabling users to access the remaining buttons. However, due to a bug, this overflow button would occasionally shift to a second row, disrupting the layout, especially during window resizing.

TinyMCE 7.0 addresses this issue, by adding improvements to the resizing behavior of the toolbar to ensure it consistently fits within one row.

As a result, the toolbar now adjusts its size appropriately and maintains a single-row layout, effectively preventing the overflow button from erroneously moving to a second row under any circumstances.

Previously in TinyMCE 6, when the table_style_by_css option was true and the table border width was set to 0px within the "Table Properties" dialog, the table’s border attribute would be set to 1 and border-width: 0px would be applied to all cells in the table. This behaviour was unintentional and differed from setting the table_style_by_css option to true in TinyMCE 5.

In TinyMCE 7.0 addressed this issue. Now, setting the border width to 0 consistently sets the table border attribute to 0, removing border-width styles from all table cells, and aligning the behavior of the "Border width" property with TinyMCE 5.

Previously in Firefox, when the FakeCaret was rendered, in some cases the real caret was incorrectly rendered too.

As a consequence, the FakeCaret was visible at the same time as the real caret which should have been hidden.

TinyMCE 7.0 addresses this issue, now, the container containing the real caret, when we render the FakeCaret, is styled with 'caret-color': 'transparent'.

As a result, the real caret is now hidden when TinyMCE renders the FakeCaret.

Previously, the cursor position was incorrectly calculated after pasting a new row or column when using the mceTablePasteRowAfter command, mceTablePasteColAfter command, or "Paste row after" and "Paste column after" UI menu items.

As a consequence, after pasting, the cursor remained in the same position instead of moving to the newly pasted row or column.

TinyMCE 7.0 addresses this, fixing the cursor calculation.

Now, when using the mceTablePasteRowAfter command, mceTablePasteColAfter command, or "Paste row after" and "Paste column after" UI menu items, the cursor is correctly positioned in the newly pasted row or column as expected.

A cross-site scripting (XSS) vulnerability was discovered in TinyMCE’s content insertion code. This allowed iframe elements containing malicious code to execute when inserted into the editor. These iframe elements are restricted in their permissions by same-origin browser protections, but could still trigger operations such as downloading of malicious assets.

TinyMCE 6.8.1 introduced a new sandbox iframes boolean option which adds the sandbox="" attribute to every iframe element by default when enabled. This will prevent cross-origin, and in special cases same-origin, XSS by embedded resources in iframe elements. From TinyMCE 7.0.0 onwards the default value of this option is true.

In TinyMCE 7.0.0 a new sandbox_iframes_exclusions option was also added, allowing a list of domains to be specified that should be excluded from having the sandbox="" attribute applied when the sandbox_iframes option is enabled. By default, this option is set to an array of domains that are provided in embed code by popular websites. To sandbox iframe elements from every domain, set this option to [].

CVE: CVE-2024-29203

GHSA: GitHub Advisory.

A cross-site scripting (XSS) vulnerability was discovered in TinyMCE’s content loading and content inserting code. A SVG image could be loaded though an object or embed element and that image could potentially contain a XSS payload.

TinyMCE 6.8.1 introduced a new convert_unsafe_embeds option to automatically convert object and embed elements respective of their type attribute. From TinyMCE 7.0.0 onwards, the convert_unsafe_embeds option is enabled by default.

CVE: CVE-2024-29881

GHSA: GitHub Advisory.

Currently, Non-breaking spaces   may be inadvertently inserted around content inside <p> </p> during Markdown conversion, requiring users to manually remove them post-conversion as the current workaround.

Tab navigation inside the Enhanced Code Editor does not function as expected when the host browser is Safari, as tab-key navigation through browser elements is not enabled by default on MacOS.

Enhanced Code Editor currently has an issue with the display of text color when TinyMCE is set to skin: 'oxide-dark'. When this setting is applied, the text color inside the Enhanced Code Editor does not display correctly.

Workaround:

When a table element has colgroup attribute, Revision History highlights it as new even though it has no change.

Currently, there is no current workaround for this issue.

For now, the current workaround is to add a custom toolbar button.