Migrating from TinyMCE 5 to TinyMCE 6
The process for setting up a basic TinyMCE 6 instance is the same as TinyMCE 5.
Most configuration changes in TinyMCE 6.0 only affect complex use cases, such as custom plugins and customized user interface components.
This chapter describes the settings that require updating prior to migration; and workaround procedures for deprecated, deleted, and updated features.
It set outs the TinyMCE 6.0 changes that customers using TinyMCE 5 should be aware of as part of upgrading.
For support related to migration, please contact Tiny support. Open Source users: please report issues in the TinyMCE GitHub Repository. |
TinyMCE 6 core changes
Contents
Summary
This section documents the four core changes made to TinyMCE 6.0.
Core changes
-
Browsers supported by TinyMCE 6.0 have changed. TinyMCE 6.0 supports the current and previous major versions of Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari. TinyMCE 6.0 also supports the current Long Term Release of each of the above browsers (eg, Mozilla Firefox ESR and Google Chrome ESR).
In particular, this means TinyMCE 6.0 does not support Microsoft Internet Explorer 11. -
Premium Plugins released with TinyMCE 6.0 are not backwards compatible with earlier versions of TinyMCE.
-
The open source version of TinyMCE 6.0 is now licensed under the MIT License.
-
Three additional professionally translated language packs are now available for use with TinyMCE 6.0:
-
Hindi (hi);
-
Malay (ms); and
-
Vietnamese (vi)
These packs are available to all Cloud subscribers and all Premium plan subscribers.
-
This section also includes four tables that set out the:
-
renamed APIs, Commands, Plugins, Options, and UI & UX elements
-
values changed in a default TinyMCE 6.0 instance.
-
previously deprecated and now removed items.
-
never documented, and consequently never supported, items that have now been removed.
Things we renamed
Old name | New name | Element | Notes |
---|---|---|---|
|
|
Menu item |
No behavioral changes. |
|
|
Toolbar item |
No behavioral changes. |
|
|
Plugin |
NB: Image Tools is now Enhanced Image Editing, a Premium plugin. |
|
|
Option |
NB: Image Tools is now Enhanced Image Editing, a Premium plugin. |
|
|
Option |
NB: Image Tools is now Enhanced Image Editing, a Premium plugin. |
|
|
Option |
NB: Image Tools is now Enhanced Image Editing, a Premium plugin. |
|
|
Option |
NB: Image Tools is now Enhanced Image Editing, a Premium plugin. |
|
|
Option |
NB: Image Tools is now Enhanced Image Editing, a Premium plugin. |
|
|
Option |
NB: Image Tools is now Enhanced Image Editing, a Premium plugin. |
|
|
API |
|
|
|
Option |
No behavioral changes, but there are related toolbar and menu items changes. |
|
|
Toolbar item |
No behavioral changes. |
|
|
Menu item |
No behavioral changes. |
|
|
Option |
No behavioral changes. |
|
|
Toolbar item |
No behavioral changes. |
|
|
Menu item |
No behavioral changes. |
|
|
Option |
No behavioral changes. |
|
|
Function |
This function is part of the |
|
|
API |
|
|
|
Command |
This |
|
|
Option |
No behavioral changes. |
|
|
Option |
Changed for consistency with other |
|
|
Option |
Changed for consistency with other options. The functionality, and the values this option can take remain unchanged. |
|
|
Option |
Changed for consistency with other options. The functionality, and the values this option can take remain unchanged. |
|
|
Command |
Use |
|
|
Option |
After upgrading, rename the options in your TinyMCE init configuration to match the new name. For example, |
|
|
Option |
After upgrading, rename the options in your TinyMCE init configuration to match the new name. For example, |
|
|
Toolbar item |
No behavioral changes. |
|
|
Menu item |
No behavioral changes. |
|
|
Option |
After upgrading, rename the options in your TinyMCE init configuration to match the new name. Also, remove |
|
|
API |
Updated so the API better reflects what it is checking for. |
|
|
API |
Updated so the API now uses the current name of Apple’s desktop operating system when checking to see if a device’s OS is, in fact, macOS. |
|
|
Plugin, Menu item, and Toolbar item |
This presents in both the menu item and the toolbar’s tooltip text. NB: Table of Contents is now a Premium plugin. |
|
|
Toolbar item |
This presents in the toolbar’s tooltip text. NB: Table of Contents is now a Premium plugin. |
|
|
Option |
NB: Table of Contents is now a Premium plugin. |
|
|
Option |
NB: Table of Contents is now a Premium plugin. |
|
|
Option |
NB: Table of Contents is now a Premium plugin. |
-
Commands are what is passed via the
editor.execCommand()
API.Where a Command name has change, calls to
editor.execCommand()
API must be changed to match the new name. -
Configuration Options are what is passed when initialising the TinyMCE editor via
tinymce.init
.Where an Option name has changed, configurations using that option must be changed to match the new name.
-
Menu items and Toolbar items are Options from
tinymce.init
for UI and UX features, such as the TinyMCE Menu, Toolbar and Contextual Menu.
Default value changes
Element | Old value | New value | Notes |
---|---|---|---|
|
|
|
|
assignment operator character |
|
|
Changed in the |
|
no default value assigned |
|
Changed as part of modernising TinyMCE’s default behavior. |
|
|
|
Changed to improve user experience. |
|
|
|
Changed as part of modernising TinyMCE’s default behavior. |
TinyMCE |
no default value assigned |
|
Changed as part of modernising TinyMCE’s default behavior. |
|
|
|
Changed as part of modernising TinyMCE’s default behavior. |
|
|
|
Changed as part of modernising TinyMCE’s default behavior. |
Previously deprecated items now removed
The following elements were previously deprecated and have, with this release, been removed entirely from TinyMCE.
Item | Element | Notes |
---|---|---|
|
API |
|
|
API |
From |
|
Option |
|
|
Schema option |
|
|
Schema option |
|
|
API |
|
|
API |
From |
|
API |
From |
|
API |
|
|
Option |
|
|
API |
From |
|
API |
From |
|
API |
|
|
Option |
From |
|
Property |
From |
|
Option |
From |
|
Option |
From |
|
API |
|
|
Option |
|
|
Option |
Superseded by |
|
Option |
|
|
Option |
Superseded by |
|
Option |
|
|
Option |
|
|
Option |
Replaced by |
|
Option |
|
|
API |
Use the native |
|
API |
|
|
API |
|
|
Option |
From |
|
Schema option |
|
|
Schema option |
|
|
Option |
Replaced, as of TinyMCE 6.6.1, by |
|
API |
From |
|
Schema option |
|
|
API |
|
|
API |
From |
|
API |
|
|
API |
From |
|
Schema option |
|
|
API |
|
|
Schema option |
|
|
Schema option |
|
|
Schema option |
|
|
API |
From |
|
Option |
Superseded by |
|
Option |
From |
|
Schema option |
|
|
Schema option |
|
|
API |
Any remaining |
Previously undocumented items removed without prior deprecation
The following elements were never documented and have never been formally supported.
Consequently, they were removed with this release without deprecation notices being provided in earlier releases.
Item | Element |
---|---|
|
API |
|
Command |
|
Command |
|
Command |
For additional details on TinyMCE 6.0 changes, see TinyMCE 6.0 release notes overview.
APIs
AddOnManager
Previously, when loading a requested resource, the AddOnManager
passed a success
or failure
callback to report the status of the request. In TinyMCE 6, AddOnManager
reports this status by returning a Promise
.
change
editor event
Previously, the change
event was triggered by the first modification made to a TinyMCE editor instance. However, subsequent changes did not cause the event to fire until focus was switched away from the editor.
For example, typing a single character into the TinyMCE editor text-entry area triggered the change
event. Subsequent typing, or selecting of the entered character and modifying it by setting it to bold or italic, did not trigger further change
events. Making further modifications and then switching focus away from the editor did trigger this event, however.
As of TinyMCE 6, the change
event is not fired unless and until
-
focus is switched away from the editor; and
-
changes have been made in the editor since focus was switched to it.
It is still possible to listen for modification to a TinyMCE editor instance before focus is changed. To do this, listen for the dirty event, rather than the change event.
|
Dialog redial
API
Previously, when a component in a TinyMCE dialog box changed — for example, when a next or previous button was clicked — the entire dialog box was re-rendered.
In TinyMCE 6.0, the initialData
type in the dialog redial
API uses object diffing for the passed spec. As a consequence, the API now only re-renders the portions of a dialog that have changed.
disabled
renamed in all TinyMCE APIs
Previously, multiple TinyMCE APIs used disable
or disabled
in their function or property names.
In TinyMCE 6, these function names have been changed and configuration changes are required.
-
isDisabled()
functions are nowisEnabled()
functions.Configurations that called
isDisabled()
must now callisEnabled()
. Also, the returned or set value must be interpreted in terms of the new function name. For example, ifisDisabled(false)
was previously called, the equivalent new call isisEnabled(true)
. -
The
enable()
anddisable()
functions are now the singlesetEnabled(<state>)
function.Rather than calling the function to set the desired state, call
setEnabled()
with thetrue
orfalse
value to set the desired state. -
The
disable(<name>)
andenable(<name>)
functions are now the singlesetEnabled(<name>, <state>)
function in the Dialog APIs.As well, the
.disabled
property is now the.enabled
property in all TinyMCE dialog APIs. -
All defaults have been swapped to retain the same logical API defaults.
fire
method renamed in all TinyMCE APIs
The fire()
method in
-
tinymce.Editor
; -
tinymce.dom.EventUtils
; -
tinymce.dom.DOMUtils
; -
tinymce.util.Observable
; and -
tinymce.util.EventDispatcher
has been renamed to dispatch()
.
fire
has been aliased to dispatch
, so existing integrations should still work as expected.
fire
has also, however, been marked as deprecated. Using dispatch()
in place of fire()
is recommended.
new
keyword no longer used to instantiate plugins
In TinyMCE 6.0, plugins (and other addons) are no longer initialized with the new
keyword.
As a consequence, the plugin initializer value passed to PluginManager.add
must be a function. It cannot be a class. (The plugin initializer value is the second argument passed to PluginManager.add()
.)
This change makes it safe to use both older functions and newer arrow functions when instantiating add-ons.
NotificationManager closeButton
and timeout
Previously, using closeButton
to disable the close button on a Notification required a timeout
value to also be set.
In TinyMCE 6 this requirement was removed; closeButton
now shows or hides the close button regardless of whether a timeout
value is set or not set. An editor.notificationManager
with both timeout: 5000
and closeButton: false
set will still present a notification that automatically closes after displaying for 5 seconds.
This does not change the behaviour of existing Notifications. |
PluginManager
Previously, when loading a requested resource, the PluginManager
passed a success
or failure
callback to report the status of the request. In TinyMCE 6, PluginManager
reports this status by returning a Promise
.
ScriptLoader
Previously, when loading a requested resource, ScriptLoader
passed a success
or failure
callback to report the status of the request. In TinyMCE 6, ScriptLoader
reports this status by returning a Promise
.
SetContent
editor event
The SetContent
event’s content
property has been deprecated.
When the SetContent
event fires, any data in content
has already been added to the TinyMCE editor instance and cannot be altered, making content
essentially moot as an SetContent
property.
To alter such data before it is added to the TinyMCE editor, use the content
property available in the BeforeSetContent
event.
The SetContent content property now returns an empty string in some cases.
|
Commands and queries
mceInsertTableDialog
Previously, the mceInsertTable
command worked in two modes.
If invoked without arguments —
tinymce.activeEditor.execCommand('mceInsertTable');
— the command opened the Insert Table dialog box.
If invoked with arguments —
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 2, columns: 2 });
— the command inserted a table, with the specified properties, directly into the document without opening the Insert Table dialog box.
In TinyMCE 6.0, the mceInsertTableDialog
command must be used to invoke the Insert Table dialog box.
The mceInsertTable command is still the command for inserting a table with specified properties directly and without asking for user-input. However, using the mceInsertTable command without arguments now throws a console error: model.min.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'rows') .
|
mceAddEditor
and mceToggleEditor
Previously, mceAddEditor
and mceToggleEditor
used the editorManager.settings
values to set the id
and UI and UX options for a new TinyMCE editor instance.
editorManager.settings
is not used at all in TinyMCE 6 and has been removed.
Instead, the mceAddEditor
and mceToggleEditor
commands use id
and options
values from an object passed in when the command is run.
For example —
tinyMCE.execCommand('mceAddEdit', false, { id: 'ed-1', options: { readonly: false, toolbar: 'bold italic strikethrough' } })
— finds a textarea
with id ed-1
and turns it into a working TinyMCE editor that displays the bold, italic, and strikethrough buttons in the editor toolbar.
Options
element_format
Previously, element_format
had no explicit default value. It’s implicit value, however, was xhtml
.
In TinyMCE 6.0, element_format
now has an explicit default value: html
.
This new, and explicit default changes how entered material is serialised. In particular, self-closing elements, such as <hr>
, <br>
, and <img>
no longer present in the xhtml
standard fashion, as <hr />
, <br />
, and </img />
respectively.
If xhtml standard representation is required, explicitly setting element_format to xhtml works as before.
|
images_upload_handler
Previously the images_upload_handler
option passed success
or failure
callbacks to report the status of an image upload. In TinyMCE 6, images_upload_handler
reports upload results by returning a Promise
.
link_default_protocol
The link_default_protocol
option sets the link protocol used by links added or edited using the link dialog.
It now defaults to 'https'
. Previously it defaulted to 'http'
.
The link_default_protocol value is only applied to an edited or inserted link if the protocol is not explicitly specified.
|
Text Patterns
As noted in the TinyMCE 6.0 Release Notes, the textpattern_patterns
option:
-
Was renamed to
text_patterns
; -
Had its functionality moved to the Core of TinyMCE 6.0.
As well, the textpattern
API has been removed.
Finally, and unlike in previous versions of TinyMCE, text patterns are now on by default. text_patterns: false
turns the functionality off.
Using text_patterns: [] to turn text_patterns off is not supported. It sets text_patterns to an empty array. Having, consequently, no patterns to match, it presents as if text_patterns is off. Appearance is not reality, however. Setting text_patterns: false is the only supported way of disabling text_patterns .
|
After upgrading:
-
Rename any options in your TinyMCE init configuration to match the new name.
-
Remove
textpattern
from your plugins list.
Plugins
plugins
option
Previously, the list of configured plugins could be retrieved by calling editor.getParam('plugins')
and returned the configured plugins as a string.
As of TinyMCE 6, the list of configured plugins is retrieved by calling editor.options.get('plugins')
and now returns the configured plugins as an array.
Plugin loading format change
TinyMCE 6.0 allows plugin loading in any of three formats:
-
An array of strings:
plugins: [ 'advlist', 'lists', 'image', 'help', 'wordcount' ]
-
A space-separated string:
plugins: 'advlist lists image help wordcount'
-
A comma-separated string, with or without spaces:
plugins: 'advlist,lists,image,help,wordcount'
plugins: 'advlist, lists, image, help, wordcount'
Previously, one other format was allowed: arrays of space-separated strings. This format is no longer accepted in TinyMCE 6.0.
Removed plugins
All references to any of these plugins should be removed from plugin configurations.
Leaving references to removed plugins in a plugin configuration will cause console errors documenting the plugin failing to load. TinyMCE 6.0 should, otherwise, work without error. If, however, TinyMCE 6.0 is ‘installed' incorrectly — by being unZipped onto an existing TinyMCE 5.0 instance for example — the old plugin will not be removed, it will load and, since a TinyMCE 5.x plugin is attempting to work with a TinyMCE 6.0 instance, error notifications will almost certainly present to the end-user. |
See below for specific documentation of potential migration issues, if any, regarding these removed plugins.
Five plugins were removed as per the previous TinyMCE 5 announcement:
-
fullpage
-
bbcode
-
legacyoutput
-
tabfocus
-
spellchecker
Four plugins were removed because their functionality is now a Core part of TinyMCE 6.0:
-
hr
-
noneditable
-
paste
-
print
The functionality from these plugins is now enabled automatically, except for paste
which as previously announced no longer supports cleaning Microsoft Word content.
Three plugins have been empty stub plugins since TinyMCE 5.0, and were removed in TinyMCE 6.0:
-
colorpicker
-
contextmenu
-
textcolor
The Premium plugin, Spell Checker Pro, which offers equivalent functionality and more, is available. |
No Premium Plugins released with TinyMCE 6.0 are backwards compatible with earlier versions of TinyMCE. |
Enhanced Image Editing (was Image Tools)
As noted in the TinyMCE 6.0 Release Notes, the imagetools
plugin is no longer included as part of the Free editor.
Image Tools is now Enhanced Image Editing, a Premium plugin.
The imagetools_proxy
option has been renamed to editimage_proxy
. However, when setting up Tiny services the recommended configuration is now editimage_proxy_service_url
and will be used in favour of editimage_proxy
if both are set.
Users of the Free version of TinyMCE 5.x who rely on the removed imagetools
plugin should not upgrade to TinyMCE 6.0 without a subscription plan that provides access to Enhanced Image Editing.
No Premium Plugins released with TinyMCE 6.0 are backwards compatible with earlier versions of TinyMCE. |
Media
As noted in the TinyMCE 6.0 Release Notes, the media
plugin no longer uses the SaxParser.
As a consequence the iframe
, video
, audio
, and object
elements are no longer marked as special, and cannot be marked as such. Put another way, the DOM parser does not preserve embedded content.
Instead these elements, and their contents, are validated against the TinyMCE schema.
This validation is generally done by the valid_elements
, valid_children
or extended_valid_elements
config.
The schema must, therefore, be configured to allow usage of the media elements, and the media element attributes.
As of this release, there are no known cases of this change causing media objects to not work as expected. But, also as of this release, not every potential or possible use-case has been tested. |
Mentions
The getUsers
API was a part of the mentions
plugin and was used to retrieve a list of mentioned users in the current editor session.
This API has been deprecated in TinyMCE 6.0.
Refer to the TinyMCE 6.0 Release Notes for an alternative to the getUsers
API.
Paste
As noted in the TinyMCE 6.0 Release Notes, the paste
plugin’s functionality is no longer provided as a plugin. It is now a core part of TinyMCE 6.0.
In conjunction with this change, three changes have been made:
-
A
paste
default has changed. Thepaste_data_images
option now defaults totrue
.When
paste
was a plugin, this option was, by default, set tofalse
, which prevented images being pasted from the local machine. -
The
mceInsertClipboardContent
argument,content
, has been renamed. It is nowhtml
.The new name is a more accurate reflection of what sort of data the argument passes.
The
content
argument can no longer be used withmceInsertClipboardContent
. Ifcontent
is used, no data is passed.mceInsertClipboardContent
only attempts to pass data if thehtml
ortext
property is used. -
The, now built-in,
paste
functionality no longer supports pasting from Microsoft Word.There is an open request for maintainers should someone in the community be interested in taking over maintainance of this particular functionality as a separate plugin.
If a community-maintained version of the
paste
plugin becomes available, we will link to it from here.
The Premium plugin, PowerPaste, is available. It provides the capability to accept data from Microsoft Word and Microsoft Excel, and clean-up the received data before pasting it into place. |
No Premium Plugins released with TinyMCE 6.0 are backwards compatible with earlier versions of TinyMCE. |
Tabfocus
The tabfocus
plugin has been removed. It is no longer part of TinyMCE 6.0. And it is not otherwise available.
The tabfocus_elements
option, which relied on the tabfocus
plugin, no longer functions.
As per standard web practice, the tabindex
attribute should be used instead of the tabfocus
plugin or any of the tabfocus
plugin’s options.
The tab order of a page’s elements, including TinyMCE, is configured by setting the tabindex
attribute on the relevant HTML elements. The browser then natively handles the tab order.
To configure tabindex
for the TinyMCE editor, set the attribute on the target element for the editor. For example:
tinymce.init({
selector: 'textarea'
});
...
<input tabindex="1">
<textarea tabindex="2"></textarea>
<input tabindex="3">
In iframe (classic editor) mode, TinyMCE copies the tabindex
attribute from the target element to the editor’s iframe, to allow this to work correctly.
Table of Contents
As noted in the TinyMCE 6.0 Release Notes, the toc
plugin is no longer part of the Free editor.
Table of Contents has been updated and is now a Premium plugin.
Users of the Free version of TinyMCE 5.x who rely on the, now deprecated and removed, toc
plugin, should not upgrade to TinyMCE 6.0 without a subscription plan that provides access to Premium plugins such as Table of Contents.
The new Premium tableofcontents
plugin also changes the names of several elements.
Old name | New name |
---|---|
|
|
|
|
|
|
|
|
|
|
Any configurations or logic that use the old element names must be updated to the new names after upgrading to TinyMCE 6.0 and installing the new tableofcontents
plugin.
No Premium Plugins released with TinyMCE 6.0 are backwards compatible with earlier versions of TinyMCE. |
Schema
Default schema is HTML 5
-
TinyMCE 6.0 instances now explicitly use HTML 5 as the default schema.
The previous default was, for practical purposes, also HTML 5, but no specific schema was set. This change formalises and makes explicit what was, previously, only implicit.
There is only one functional change consequent to this explicit setting of a default schema.
Previously, if you did not explicitly set the schema to anything,
b
andi
elements were automaticlly transformed intostrong
andem
elements respectively.If, however, you explicitly set the schema to
html5
,b
andi
elements were preserved.With this release,
html5
is explicitly set as the schema by default, andb
andi
elements are automatically transformed intostrong
andem
elements.That is, the element transformation persists even though the
html5
schema is now explicitly set.html5-strict
is still an available schema option and is unchanged from TinyMCE 5.x. -
The assignment operator character —
:
— has been changed to~
for thevalid_elements
andextended_valid_elements
schemata.The
:
is also used to assign an[xlink:href]
rule and this was not possible in these schemata because the colon character was acting as an assignment operator.This change allows both schemata to set attribute values for the
valid_elements
andextended_valid_elements
options using the~
character and assign [xlink:href] rules as expected.Existing configurations using either of these schemata must be edited so the
~
character is used forvalid_elements
andextended_valid_elements
options configurations. The:
character should no longer be used to set attribute values in these configurations.Also, when assigning
[xlink:href]
rules, the colon character is no longer escaped.[xlink\\:href]
can now be written plainly, as[xlink:href]
.Existing configurations that included escaped colons will continue to work as expected. Editing such configs to remove the escape characters will improve readability but is not necessary for functionality.
UI and UX elements and components
buttonType
buttonType
is a new property available for button components used in dialogs. It replaces the, now deprecated property, primary
.
The primary
property was boolean, allowing for only two states: true
and false
.
The new buttonType
property can take any of three states: 'primary'
, 'secondary'
, and 'toolbar'
.
Setting buttonType: 'primary'
is the same as setting primary: true
.
Setting buttonType: 'secondary'
is the same as setting primary: false
.
Editor height
In TinyMCE 5.x, editors without a height
value specified in the TinyMCE configuration defaulted to a height of 200px
In TinyMCE 6.0, editors without a height
value specified in the TinyMCE configuration default to 400px
.
As was the case in TinyMCE 5.x, this new default only applies to editors in iframe
mode, not inline
mode.
The new default can be overridden by explicitly setting a height
value in the TinyMCE configuration. So setting this to 200px
will recreate the previous default presentation.
Also, setting the CSS height
of the element replaced by TinyMCE to a value larger than 400px
will increase the editor height. Setting the element’s CSS height
to a value less than 400px
will not reduce the height of the editor, however.
To prevent the editor UI from disappearing during manual, end-user re-sizing, min_height now has a default value: 100px .
|
This default can be overridden as part of an initialization configuration. Setting min_height
to > 400
will increase the height of the initial TinyMCE editor.
But setting a value below 100
makes it possible for manual, end-user re-sizing to reduce the TinyMCE editor to a horizontal sliver (or, potentially, make it disappear entirely). Setting min_height
to < 100
is not recommended
formatting user interface name changes
The names of the following user-interface and user experience elements were changed.
UI or UX element | Old name | New name |
---|---|---|
Option |
|
|
Toolbar item |
|
|
Menu item |
|
|
Option |
|
|
Toolbar item |
|
|
Menu item |
|
|
Toolbar item |
|
|
Menu item |
|
|
Toolbar item |
|
|
Menu item |
|
|
Option |
|
|
The behaviour of these elements is unchanged. |
primary
The primary
property was a boolean property available as a basic panel component of dialogs
.
It has been deprecated and replaced by the new buttonType
property.
Tables are now positioned using margin
, not float
TinyMCE previously used float
to position tables to the left or right of the viewport (the working area available to the TinyMCE editor). This caused multiple layout and UX problems.
For example, consider a TinyMCE document that included a table that took up less than 100% of the viewport and a paragraph of text below that table. If both the table and the paragraph were selected and their alignment was changed to left or right, the paragraph of text moved up beside the table.
As another example, consider a TinyMCE document containing a table that is wider than the viewport. If you selected this table’s contents and set the alignment to right, the portion of the table that was outside the viewport disappeared to the left, and no scrollbar presented allowing you to bring that portion back into view.
As of TinyMCE 6.0, tables are positioned using margin
rather than float
. This prevents these layout and UX problems occurring.
However, when upgrading to TinyMCE 6.0, there are two things to be aware of:
First, TinyMCE 6.0 does not alter existing documents. Extant TinyMCE documents with tables that were aligned to either left or right will still have the float
property assigned when opened and edited unless and until their alignment is altered.
If an extant TinyMCE document with an aligned table is opened using TinyMCE 6.0 and the alignment of the table is re-set, TinyMCE 6.0 will remove the float
property and use the margin
property to set the alignment.
Second, if the previous behavior is required, a custom format
will need to be created. Specifically, the following format (the table-specific code from TinyMCE 5.x’s DefaultFormats.ts
) must be added to the format
configuration:
alignleft: [
{
selector: 'figure.image',
collapsed: false,
classes: 'align-left',
ceFalseOverride: true,
preview: 'font-family font-size'
},
{
selector: 'figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li',
styles: {
textAlign: 'left'
},
inherit: false,
preview: false,
defaultBlock: 'div'
},
{
selector: 'img,table,audio,video',
collapsed: false,
styles: {
float: 'left'
},
preview: 'font-family font-size'
}
],
aligncenter: [
{
selector: 'figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li',
styles: {
textAlign: 'center'
},
inherit: false,
preview: 'font-family font-size',
defaultBlock: 'div'
},
{
selector: 'figure.image',
collapsed: false,
classes: 'align-center',
ceFalseOverride: true,
preview: 'font-family font-size'
},
{
selector: 'img,audio,video',
collapsed: false,
styles: {
display: 'block',
marginLeft: 'auto',
marginRight: 'auto'
},
preview: false
},
{
selector: 'table',
collapsed: false,
styles: {
marginLeft: 'auto',
marginRight: 'auto'
},
preview: 'font-family font-size'
}
],
alignright: [
{
selector: 'figure.image',
collapsed: false,
classes: 'align-right',
ceFalseOverride: true,
preview: 'font-family font-size'
},
{
selector: 'figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li',
styles: {
textAlign: 'right'
},
inherit: false,
preview: 'font-family font-size',
defaultBlock: 'div'
},
{
selector: 'img,table,audio,video',
collapsed: false,
styles: {
float: 'right'
},
preview: 'font-family font-size'
}
],
Alternatively, the Formatter API can be used to register a custom format using editor.formatter.register(<name>, <format>)
.
Security
Sanitizing HTML input to protect against XSS attacks
Previously, before HTML content was passed to TinyMCE 5.x, it was parsed using an in-house developed API, SaxParser
.
The SaxParser
API was developed in the then-absence of alternatives.
When this API’s validate setting was enabled — validate: true
— SaxParser
removed elements and attributes that did not fit the declared schema.
And, over its lifetime, SaxParser
was extended. For example, as of TinyMCE 5.9, the SaxParser
API marked attributes with certain names or IDs as unsafe, because some names or IDs can cause the host browser to overwrite existing properties or functions.
Since TinyMCE 6.0, this basic parser was removed and replaced with two significantly more thorough alternatives:
-
the native browser API,
DOMParser()
; and -
the Free and Open Source XSS sanitizer for HTML, MathML and SVG, DOMPurify.
TinyMCE uses DOMPurify 2.x up to TinyMCE 6.7.3. This was updated to DOMPurify 3.x in TinyMCE 6.8, which was current at the time TinyMCE 6 was developed. |
Before HTML (or XML) content is passed to TinyMCE 6, the DOMParser
API parses the HTML (or XML) string into a DOM object. As part of this process, DOMParser
attempts to correct malformed HTML.
For example, the following string:
<p>
<a href="https://example.com">Click here.
</p>
When this string is passed in, the DOMParser
API adds the missing closing anchor tag:
<p>
<a href="https://example.com">Click here.</a>
</p>
Next, the, now correctly formed, DOM object is passed to DOMPurify.
DOMPurify runs a security-focused ruleset over the DOM object to sanitize the HTML and protect TinyMCE, and applications using TinyMCE, against XSS attacks.
Turning DOMPurify off
DOMPurify sanitization is on by default, and prior to TinyMCE 6.4, it could not be turned off.
As of TinyMCE 6.4, however, it is possible to turn DOMPurify off using the xss_sanitization
option.
xss_sanitization is set to true by default. That is, TinyMCE specifically sets the xss_sanitization option to true , even if this option is not declared in a TinyMCE configuration.
|
Type: Boolean
Default value: true
Possible values: true
, false
Example: using xss_sanitization
to turn DOMPurify off and no longer sanitize HTML against XSS attacks
tinymce.init({
selector: 'textarea', // change this value according to your HTML
xss_sanitization: false
});
Turning DomPurify off leaves TinyMCE, and any application using TinyMCE, extremely vulnerable to XSS attacks. Only turn DomPurify off if alternative and equivalently capable HTML and XML sanitization and XSS protections are in place. |