TinyMCE 6.6

The new Premium plugin, AI Assistant, allows a TinyMCE document to send queries to registered AI APIs and either:

For information on AI Assistant, see AI Assistant.

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.6 skin, Oxide.

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

A new property value — bottom — is available for inline dialog configuration.

By default, TinyMCE dialogs present as modal and in the center of the editor viewport.

Previously, adding a second argument — { inline: 'toolbar' } to editor.windowManager.open, set the dialog to appear adjacent to the TinyMCE toolbar.

With this update, a new value can be passed with this second argument: { inline: 'bottom' }.

This new inline dialog option sets the inline dialog to appear at the bottom of the editor viewport.

For details, see the Dialog position section of the Dialog configuration documentation.

A new, and optional, property, — persistent — is available for inline dialog configuration.

When this property is set to true, an inline dialog will stay open when focus is switched away from the dialog and towards other parts of the TinyMCE editor (for example, the document editor, or a menu).

If the property is not explicitly set, it is set to false, matching inline dialog behavior prior to this property being added to TinyMCE.

Also, setting the property to true does not over-ride normal mechanisms for closing a dialog, such as clicking the Close button or pressing the Esc key.

For details, see the Configuration parameters section of the Dialog configuration documentation.

A new, and optional, property, — streamContent — is available for iframe dialog components.

When this property is set to true, setData() updates content within the iframe component using document.write() rather than srcdoc.

As a consequence, the component’s contents update without reloading the frame and without flickering. As well, if the iframe component is currently scrolled to the end of the extant content, this position is maintained as new content is added.

For details, see the Configuration parameters section of the Dialog configuration documentation.

Previously, TinyMCE provided no option to set a border around the iframe dialog component. This caused UX and accessibility issues since the iframe bounds were not visible and the iframe showed no highlight when it was made the current focus.

With TinyMCE 6.6, a new, and optional, property — border — is now available for the dialog component, iframe.

When this property is set to true, a border displays around the iframe component. As well, when the border property is set to true, the iframe component is highlighted when it is given focus.

If the property is not explicitly set, it is set to false, matching the presentation norm prior to it being added to TinyMCE.

For details, see the Configuration parameters section of the Dialog configuration documentation.

A new, and optional, property — align — is available for the dialog component, label.

This property allows text in this component be set left-, centre-, or right-aligned.

If the property is not explicitly set, it uses a default value which sets label text to present as it has always been presented: left-aligned for LTR languages; and right-aligned for RTL languages.

For details, see the Configuration parameters section of the Dialog configuration documentation.

With the release of the new AI Assistant Premium plugin, TinyMCE’s default available icon set has been updated.

This update includes three new icons.

For the full list of icons available with TinyMCE by default, see Icons available for TinyMCE.

For more information on AI Assistant, see AI Assistant.

With the release of the new AI Assistant Premium plugin, TinyMCE’s default menus and toolbars have been updated.

If the AI Assistant plugin is added to a TinyMCE configuration, by default:

For more information on AI Assistant, see AI Assistant.

A TinyMCE dialog’s UI consists of three main sections: the title, body, and footer.

Previously, it was a requirement that any TinyMCE dialog — built-in or custom — displayed all three parts.

As of TinyMCE 6.6, it is possible to configure a custom dialog to not render the footer section.

When defining a modal or inline dialog, set the buttons property to [] (an empty array) or do not define the property at all. The result is a dialog that displays without rendering the footer section.

For details, see the Configuration parameters section of the Dialog configuration documentation.

The iframe dialog component takes in html as a string and displays it within the dialog.

And, previously, the component’s height adjusted dynamically to take up the space remaining in a dialog once other components were rendered.

Large dialogs have a purposefully large fixed height, creating substantial empty space for the iframe component to dynamically fill.

Examples of large dialogs include the dialogs presented by choosing View → Preview or View → Source code from a default TinyMCE instance menu bar.

Medium dialogs, however, do not have a static height. Instead, they render with the height needed to fit its components.

As a consequence, iframe dialog components placed within medium dialogs acquired their height value from the host browser, taking said host browser’s minimum iframe height.

In many circumstances, this produced a display area to small to usefully display the content added to the iframe component.

As of the TinyMCE 6.6 update, the component has a minimum height of 200px, improving its out-of-the-box utility as a display component, particularly in medium dialogs.

For more information about this component, see the iframe section of the Dialog components documentation.

For more information about dialogs, see the Dialog configuration documentation.

When a TinyMCE instance has it’s UI mode set to split, support for setting the editor inside a scrollable container is enabled and TinyMCE editor elements — such as pop-ups, menus, and inline dialogs — are rendered in separate containers and inserted as sibling elements to the editor.

Previously, however, identifying all scrollable parent elements in such a setup was done with only a naive check. As a consequence, when other overflow properties — such as overflow-x — were introduced, the TinyMCE editor and the TinyMCE toolbar could behave unexpectedly in some circumstance.

In TinyMCE 6.6.1, the naive check has been replaced with specific edge case coverage and a related test.

As a consequence, the TinyMCE editor and the TinyMCE toolbar now behave as expected when overflow properties are introduced.

The url argument in an alertbanner dialog component is optional. When it is specified, the value of the argument is passed to the onAction function when the dialog’s icon is activated by clicking or pressing.

Previously, however, when the url argument was not specified, the dialog icon remained clickable or pressable, even though nothing happened on this user action.

With this update, this has been changed.

The icon in an alertbanner dialog remains visible, but it is no longer clickable if the url argument is not specified.

For more information on alertbanner dialog components, see the Alert banner section of the Dialog components documentation.

Previously, although the inline dialog specification included a size option, the function was not implemented. As a consequence, no matter what value size was set to, an inline dialog’s size defaulted to normal.

For this update the missing functionality, which applies the necessary CSS when a size value is set for an inline dialog, was added.

Setting an inline dialog to any of the supported sizes —

— now changes the dialog’s width, as expected.

For more information see the Options table in the Dialog configuration documentation.

Previously, when a dialog was blocking, the close button — X — became inactive. Pressing the Esc key still closed the dialog, but the close button was not available to a mouse pointer and could not be navigated to using keyboard navigation.

As of TinyMCE 6.6 this has been corrected. A dialog’s close button now remains active and available as a tool for closing a dialog, even when the dialog is blocking.