TinyMCE 7.0
These are the Tiny Cloud and TinyMCE Enterprise release notes. For information on the latest community version of TinyMCE, see the TinyMCE Changelog. |
TinyMCE 7.0 is licensed under GPL Version 2 or later. This version introduces a new license_key configuration setting that gives self-hosted users the ability to select a usage under the GPL or to authenticate their paid license with Tiny. |
Overview
TinyMCE 7.0 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, March 20th, 2024.
The release brings new features essential for content producers and managers in the modern workplace. These features improve efficiency through simplified sharing of content and providing improved tools for the asynchronous collaboration needs of remote teams.
-
Revision History: View changes from one content version to another.
-
Document Converters: Effortlessly import content from Microsoft Word and export it to either Microsoft Word or PDF documents.
-
Markdown: Paste markdown from other platforms into the editor for instant rich-text conversion.
These release notes provide an overview of the changes for TinyMCE 7.0, including the following:
For additional details on TinyMCE 7.0 breaking changes when considering upgrading, see Migrating from TinyMCE 6 to TinyMCE 7. |
New Premium plugins
The following new Premium plugins was released alongside TinyMCE 7.0.
Revision History
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.
Import from Word
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.
Export to 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.
Export to PDF
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.
Markdown
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.
Accompanying Premium plugin changes
The following premium plugin updates were released alongside TinyMCE 7.0.
TinyMCE 7.0 plugin naming unification
With the release of TinyMCE 7.0, the below plugins are adopting the following name changes.
Old Name | New Name |
---|---|
Advanced Code Editor |
Enhanced Code Editor |
Advanced Lists |
List Styles |
Advanced Tables |
Enhanced Tables |
Advanced Templates |
Templates |
Enhanced Image Editing |
Image Editing |
Skins & Icons Packs |
Enhanced Skins & Icons Packs |
Spell Checker Pro |
Spell Checker |
That while these changes are to update the plugin names used in documentation and communication materials, this does not alter the plugin identifiers themselves at this time. This means that existing integrations and configurations will remain unaffected by this change. |
Templates
The TinyMCE 7.0 release includes an accompanying release of the Templates premium plugin.
Templates includes the following improvement.
Missing tooltip for category and template three dots menu button in the Templates dialog.
Previously, the three dots menu button for category and template in the Templates dialog were missing a tooltip, making them inaccessible.
In TinyMCE 7.0, the three dot menu buttons for categories and templates in the Templates dialog now have informative tooltips. This clarifies their purpose for all users, enhancing discoverability and improving the overall experience, especially for those relying on assistive technologies.
The Templates plugin mentioned here refers to the premium plugin that has been renamed, not the open-source plugin. See TinyMCE 7.0 plugin naming unification for more information. |
Enhanced Code Editor
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.
Updated CodeMirror to version 6.
TinyMCE 7.0 introduces CodeMirror 6.
With this update, users have gained access to improved features "to be expanded on in future releases" and a more responsive editing experience.
During the integration process, TinyMCE made necessary adjustments to ensure compatibility between TinyMCE 7.0 and CodeMirror 6. Specifically, our CSS reset rules were refined to accommodate the dynamically generated styles of CodeMirror 6 and as a result the codemirror.css
file was removed from the plugin deployment.
This update from CodeMirror 5 to 6 should have no impact on customers utilizing the Enhanced Code Editor feature. More information about CodeMirror 6 will be included in future patch releases.
Enhanced Code Editor search and replace keyboard shortcuts
Enhanced Code Editor provides the following shortcuts within the code dialog.
Action | Windows Shortcut | macOS Shortcut |
---|---|---|
Find |
Ctrl+F |
Command+F |
Find Next |
F3 |
F3 |
Find Previous |
Shift+F3 |
Shift+F3 |
Go to Line |
Ctrl+G |
Command+G |
Close Search Panel |
Esc |
Esc |
Indent Code |
Ctrl+] |
Command+] |
Outdent Code |
Ctrl+[ |
Command+[ |
Fold Code |
Ctrl-Shift-[ |
Command-Option-[ |
Unfold Code |
Ctrl-Shift-] |
Command-Option-] |
Fold All |
Ctrl-Alt-[ |
Ctrl-Option-[ |
Unfold All |
Ctrl-Alt-] |
Ctrl-Option-] |
Accept Completion |
Enter |
Enter |
For information on the Enhanced Code Editor plugin, see: Enhanced Code Editor.
Tab and shift + tab didn’t not navigate to the next tab stop inside the code dialog.
Previous versions of the Enhanced Code Editor (formally known as Advanced Code Editor), in the code dialog, the tab
and shift + tab
functionalities failed to navigate to the next tab stop.
As the Enhanced Code Editor serves as the container for Codemirror
, this absence resulted in ineffective tab navigation.
TinyMCE 7.0 addresses this issue, by implementing the new tab behavior for the Enhanced Code Editor, thereby resolving the problem.
As a result, both the Enhanced Code Editor and Codemirror
now exhibit managed tabbing behavior’s, ensuring smoother navigation within the code dialog.
Add Cmd+g
/Ctrl+g
shortcut for gotoLine
command.
Enhanced Code Editor introduces a new shortcut: ctrl+g
for Linux and Windows, and cmd+g
for Mac users with TinyMCE 7.0.
The shortcut allows the user to:
-
quickly jump to any line in your code.
-
specify line numbers
-
use relative offsets like + or -
-
document percentages with %, and;
-
even add a column position with a colon and a number after the line.
Find more details in the documentation here: gotoLine
Add aria-label
to Enhanced Code Editor.
During an internal audit, it was discoverd that the <textarea>
element within the "Source Code" dialog, which allows users to input code, was missing an accessible name.
This meant that screen reader users could not read the proper information about the purpose of the input field when navigating it.
TinyMCE 7.0 addresses this issue, by adding an aria-label
attribute to the <textarea>
element with the value "Source code".
As a result, screen readers now announce the input field as "Source code" when users navigate into it.
Accompanying open source plugin end-of-life announcement
The following open source plugin has been announced as reaching its end-of-life:
The open-source template
plugin has been removed.
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.
Accompanying Enhanced Skins & Icon Packs changes
The TinyMCE 7.0 release includes an accompanying release of the Enhanced Skins & Icon Packs.
Enhanced Skins & Icon Packs
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.
Fixed some focus issues related to TinyMCE 5 skin and Enhanced skins.
The current colors for various UI buttons didn’t provide suitable contrast against the background/neighboring components.
As a consequence, users with accessibility requirements had difficulty determining the current active/focused/hovered/enabled
component in the UI.
TinyMCE 7.0 addresses this issue, now, the colors for many of these UI components have been updated for each of these states.
As a result, these components now have appropriate levels of contrast for ease of use by users with accessibility requirements.
For information on using Enhanced Skins & Icon Packs, see: Enhanced Skins & Icon Packs.
Improvements
TinyMCE 7.0 also includes the following improvements:
Shortcut included in tooltips for basic and toggle toolbar buttons.
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:
-
Default buttons: This includes commonly used functions like
bold
,italic
,underline
,selectall
,redo
,undo
, heading levels (h1-h6
),help
,link
,save
,searchreplace
, andfullscreen
. -
Custom buttons: Any custom toolbar button registered with a keyboard shortcut will also display the shortcut in its tooltip.
See the Basic toolbar button, Toggle toolbar button and Keyboard Shortcuts documentation for more information.
Added custom tooltip for dialog collection items, now visible on both mouse hover and keyboard focus.
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.
Make table ghost element better reflect height changes when resizing.
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.
Autocompleter did not work when attempting to insert a mention
or emoji
when using an IME
.
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.
Improved accessibility for interactive elements with custom tooltips.
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:
-
Toolbar buttons
-
Resize handle
-
Buttons in a dialog
-
Buttons in a view container
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.
Interactive elements with visible labels do not display custom tooltips, and the browser native tooltips have been removed, as the visible label provides sufficient information. |
The max-width of the tooltips is set to 15em , to overwrite the default max-width of the tooltips, update the @tooltip-max-width variable in your custom skin.
|
Added tooltips to Click for more info
button in the accessibility checker dialog.
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.
Improved Custom Elements.
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:
-
New Custom Element Structure: The custom_elements option and
addCustomElements
API now support a more complex structure. Each element is defined by a key-value pair, allowing for detailed specifications. -
Attributes and Inheritance: Elements can inherit attributes and children from other specified elements using the extends property in the Custom Element Spec.
-
Attribute and Children Specifications: The Custom Element Spec includes properties such as attributes and children, enabling precise customization of element behavior.
For more information and details for addCustomElements
see custom_elements.
Improved support of data
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.
Additions
TinyMCE 7.0 also includes the following addition:
A new trigger
property for block text pattern configurations, allowing pattern activation with either Space or Enter keys.
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:
[
{ start: '*', end: '*', format: 'italic' },
{ start: '**', end: '**', format: 'bold' },
{ start: '#', format: 'h1' },
{ start: '##', format: 'h2' },
{ start: '###', format: 'h3' },
{ start: '####', format: 'h4' },
{ start: '#####', format: 'h5' },
{ start: '######', format: 'h6' },
// The following text patterns require the `lists` plugin
{ start: '1. ', cmd: 'InsertOrderedList' },
{ start: '* ', cmd: 'InsertUnorderedList' },
{ start: '- ', cmd: 'InsertUnorderedList' }
]
to the following new preconfigured defaults:
[
{ start: '*', end: '*', format: 'italic' },
{ start: '**', end: '**', format: 'bold' },
{ start: '#', format: 'h1', trigger: 'space' },
{ start: '##', format: 'h2', trigger: 'space' },
{ start: '###', format: 'h3', trigger: 'space' },
{ start: '####', format: 'h4', trigger: 'space' },
{ start: '#####', format: 'h5', trigger: 'space' },
{ start: '######', format: 'h6', trigger: 'space' },
{ start: '1.', cmd: 'InsertOrderedList', trigger: 'space' },
{ start: '*', cmd: 'InsertUnorderedList', trigger: 'space' },
{ start: '-', cmd: 'InsertUnorderedList', trigger: 'space' },
{ start: '>', cmd: 'mceBlockQuote', trigger: 'space' },
{ start: '---', cmd: 'InsertHorizontalRule', trigger: 'space' },
]
Customers that wish to revert back to the previous default block text_patterns execution on Enter key pressing will be required to replace the preconfigured text_patterns with following array:
|
[
{ start: '*', end: '*', format: 'italic' },
{ start: '**', end: '**', format: 'bold' },
{ start: '#', format: 'h1', trigger: 'enter' },
{ start: '##', format: 'h2', trigger: 'enter' },
{ start: '###', format: 'h3', trigger: 'enter' },
{ start: '####', format: 'h4', trigger: 'enter' },
{ start: '#####', format: 'h5', trigger: 'enter' },
{ start: '######', format: 'h6', trigger: 'enter' },
{ start: '1. ', cmd: 'InsertOrderedList', trigger: 'enter' },
{ start: '* ', cmd: 'InsertUnorderedList', trigger: 'enter' },
{ start: '- ', cmd: 'InsertUnorderedList', trigger: 'enter' },
]
The trigger property is exclusively applicable to the configuration of block text patterns. It is not recognized in the configurations for inline and replacement text patterns.
|
For information on the text_patterns, see Text Patterns
Added custom tooltip for autocompleter
, now visible on both mouse hover and keyboard focus, except single column cases.
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.
The tooltip will only be displayed when the autocompleter columns are set to a value greater than 1 . This is because when there is a visible label, the tooltip functionality is not needed and therefore omitted.
|
Element preset support for the valid_children
option and Schema.addValidChildren
API.
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.
tinymce.init({
selector: "textarea",
custom_elements: 'block-container,phrasing-container,flow-container',
valid_children: 'block-container[@blocks],phrasing-container[@phrasing],flow-container[@flow]'
});
For more information on content filtering for custom elements, see custom_elements.
Changes
TinyMCE 7.0 also includes the following changes:
convert_unsafe_embeds
editor option is now defaulted to true
.
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.
sandbox_iframes
editor option is now defaulted to true
.
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.
The DOMUtils.isEmpty
API function has been modified to consider nodes containing only comments as empty.
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.
Users who relied on DOMUtils.isEmpty returning false for elements with only comments should update their implementation. Elements with only comment nodes are now recognized as empty in TinyMCE 7.0.
|
The highlight_on_focus
option now defaults to true, adding a focus outline to every editor.
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.
Any editors using this highlight_on_focus: true option, can remove this option from their TinyMCE init configuration when upgrading to TinyMCE 7.0.
|
Remove the height field from the table
plugin cell dialog. The table
plugin row dialog now controls the row height by setting the height on the tr
element, not the td
elements.
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 adjusting row height through the row dialog, any height styles previously applied to td/th elements will be automatically removed.
|
Change table height resizing handling to remove heights from td
/th
elements and only apply to tr
elements.
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
Removed incorrect aria-placeholder
attribute from editor body when placeholder
option is set.
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.
Optional Tooltip for Dialog Footer Toggle Buttons.
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.
Changed the media_url_resolver
option to use promises.
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
Accurate default options in the styles
bespoke select toolbar button.
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.
Removed
TinyMCE 7.0 also includes the following removals:
Removed force_hex_color
option, with the default now being all colors are forced to HEX format and as lower case.
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, only RGB values in absolute value like rgb(255, 255, 255)
are converted to HEX values. Other RGB formats such as those with non-absolute values, and color options such as RGBA and HSL remain unchanged. The forced_hex_color
option has been removed.
For more information, see Migrating from TinyMCE 6 to TinyMCE 7.
Removed InsertOrderedList
and InsertUnorderedList
commands from core.
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.
The autocompleter ch
configuration property has been removed. Use the trigger
property instead.
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.
The new trigger option can handle multiple character strings as the trigger.
|
For more information, visit the updated Autocompleter documentation.
Removed closeButton
from NotificationSpec
, close button in notification is now rendered by default.
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.
Bug fixes
TinyMCE 7.0 also includes the following bug fixes:
mceTableDeleteRow
did not calculate the correct row index for colgroup tables.
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.
Heading formatting would be partially applied to the content within the summary
element when the caret was positioned between words.
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.
Moving focus to the outside of the editor after having clicked a menu would not dispatch a blur
event as expected.
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.
Autocomplete would sometimes cause corrupt data when starting during text composition.
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.
Inline mode with persisted toolbar would show regardless of the skin being loaded, causing css issues.
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.
Table classes couldn’t be removed via setting an empty value in table_class_list
.
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:
-
An empty value in the
table_class_list
option,table_row_class_list
option, andtable_cell_class_list
option will allow all classes to be removed on the selected table for the "Table Properties" dialog, selected rows for the "Row Properties" dialog, or selected cells for the "Cell Properties" dialog respectively. -
For a table with a class that does not match any of the values set in the
table_class_list
option, a "Select…" item becomes the default choice in the "Class" listbox field in the "Table Properties" dialog. (This selection maintains the existing class upon saving). Conversely, if the table has a class that does match one of the values set in thetable_class_list
option, it is automatically selected. -
For selected rows with classes that do not match any of the values set in the
table_row_class_list
, a "Select…" item becomes the default choice in the "Class" listbox field in the "Row Properties" dialog. (This selection maintains the existing classes upon saving). Conversely, if the selected row classes do match one of the values set in thetable_row_class_list
, it is automatically selected. -
For selected cells with classes that do not match any of the values set in the
table_cell_class_list
, a "Select…" item becomes the default choice in the "Class" listbox field in the "Cell Properties" dialog. (This selection maintains the existing classes upon saving). Conversely, if the selected cell classes do match one of the values set in thetable_cell_class_list
, it is automatically selected.
Directly right clicking on a <ol>
/ <li>
in FireFox didn’t enable the button List Properties…
in the context menu.
In previous versions of TinyMCE, two issues where identified that affected list properties
for <ol><li>
tags:
-
in old versions of Firefox (prior to version 121), the caret was not moved to the target position when using the right click, and;
-
as TinyMCE creates a bookmark when there is no selection for Firefox, when a user opened a context menu the editor would jump back to the newly created bookmark.
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
.
The link_default_target
option wasn’t considered when inserting a link via quicklink
toolbar.
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.
When inline editor toolbar wrapped to multiple lines the top wasn’t always calculated.
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.
Removed manually dispatching dragend
event on drop in Firefox.
Dragging and dropping an image between two cells in a table with the PowerPaste plugin enabled triggered the manual dispatching of the dragend
event when the host browser was Firefox.
As a consequence, the image was duplicated into the new cell instead of being moved from the old cell to the new one.
In TinyMCE 7.0, this manual dispatching of the dragend
event in Firefox has been removed.
As a result, when an image is dragged
and dropped
from one cell to another, it now correctly moves without duplicating itself.
Pressing Backspace at the start of an empty summary
element within a details
element nested in a list item no longer removes the summary
element.
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.
The toolbar width was miscalculated for the inline editor positioned inside a scrollable container.
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.
tinymce.init({
selector: "div",
inline: true,
toolbar_persist: true
});
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.
Fixed incorrect object processor for event_root
option.
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.
Adding newline after using selection.setContent
to insert a block element would throw an unhandled exception.
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.
Floating toolbar buttons in inline editor incorrectly wrapped into multiple rows on window resizing or zooming.
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.
When setting table border width to 0 and table_style_by_css
is true
, only the border attribute is set to 0 and border-width styling is no longer used.
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.
Clicking to the left or right of a non-editable div
in Firefox would show two cursors.
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
.
The mceTablePasteRowAfter
command, mceTablePasteColAfter
command, "Paste row after"
menu item and "Paste column after"
menu item now place the cursor in the newly pasted row/column to be consistent with the other pasting operations.
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.
Security fixes
TinyMCE 7.0.0 includes two fixes for the following security issues:
TinyMCE Cross-Site Scripting (XSS) vulnerability in handling iframes
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.
The HTTP Content-Security-Policy (CSP) frame-src or object-src can be configured to restrict or block the loading of unauthorized URLS. Refer to the TinyMCE Content Security Policy Guide.
|
TinyMCE Cross-Site Scripting (XSS) vulnerability in handling external SVG files through Object or Embed elements
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.
If you are using TinyMCE 6.8.1 or higher, set convert_unsafe_embeds to true . For any earlier versions, a custom NodeFilter is recommended to remove or modify any object or embed elements. This can be added using the editor.parser.addNodeFilter and editor.serializer.addNodeFilter APIs.
|
CVE: CVE-2024-29881
GHSA: GitHub Advisory.
Tiny Technologies would like to thank Toni Huttunen of Fraktal Oy for discovering this vulnerability. |
Known issues
This section describes issues that users of TinyMCE 7.0 may encounter and possible workarounds for these issues.
Non-breaking spaces
may be inadvertently inserted around content during Markdown conversion.
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.
<p> </p> // unexpected
<h3>Heading</h3>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p> </p> // unexpected
This issue is addressed in TinyMCE 7.0.1. |
Tab navigation inside the Enhanced Code Editor function as expected when the host browser is Safari.
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.
Keyboard navigation is essential for accessibility. While tab-key navigation is supported by default on Windows, MacOS requires users to manually enable it within their browser or system settings.
Setting this checkbox will ensure Safari functions properly with tab-key navigation through browser elements. |
Incorrect text color display with TinyMCE skin: 'oxide-dark'
.
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:
-
Open the Advanced Code (advcode) dialog.
-
Click on the
Dark/light mode
button within the dialog.-
This action will set the text color to white on a black background, resolving the display issue temporarily.
-
This workaround serves as a temporary solution until a permanent fix is implemented. |
Table that has colgroup
attribute is highlighted as new in Revision History.
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.
Revision History has no integration for saving a version.
For now, the current workaround is to add a custom toolbar button.
const revisions = [];
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'revisionhistory',
toolbar: 'revisionhistory saveversion',
setup: (editor) => {
// Save the current content of the editor as a new version
editor.ui.registry.addButton('saveversion', {
text: 'Save a version',
onAction: () => {
// Change this according to your setup
const revision = {
content: editor.getContent({ format: 'raw' }),
revisionId: (revisions.length + 1).toString(),
createdAt: new Date().toISOString()
};
revisions.unshift(revision);
}
});
},
revisionhistory_fetch: () => Promise.resolve(revisions)
});