---
title: "Migrating from TinyMCE 5 to TinyMCE 6"
description: "Guidance for migrating from TinyMCE 5 to TinyMCE 6"
canonical_url: "https://www.tiny.cloud/docs/tinymce/7/migration-from-5x/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/index.md"
version: "6"
last_updated: "2026-05-24T22:43:51Z"
tokens: 10945
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/).
# 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.

> **Note:** For support related to migration, please contact [Tiny support](https://support.tiny.cloud/hc/en-us/requests/new).
> Open Source users: please report issues in the [TinyMCE GitHub Repository](https://github.com/tinymce/tinymce/).

## Contents

- [APIs](#apis)
- [Commands and queries](#commands-and-queries)
- [Options](#options)
- [Text patterns](#text-patterns)
- [Plugins](#plugins)
- [Schema](#schema)
- [UI and UX elements and components](#ui-and-ux-elements-and-components)
- [Security](#security)

## TinyMCE 6 core changes

### Contents

- [Core changes](#core-changes)
- [Things we renamed](#things-we-renamed)
- [Default value changes](#default-value-changes)
- [Previously deprecated items now removed](#previously-deprecated-items-now-removed)
- [Previously undocumented items removed without prior deprecation](#previously-undocumented-items-removed-without-prior-deprecation)

#### Summary

This section documents the four core changes made to TinyMCE 6.0.

##### Core changes

1. 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).

> **Note:** In particular, this means TinyMCE 6.0 does not support Microsoft Internet Explorer 11.
2. Premium Plugins released with TinyMCE 6.0 are not backwards compatible with earlier versions of TinyMCE.
3. The open source version of TinyMCE 6.0 is now licensed under the  MIT License.
4. 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](/get-tiny/) and all [Premium plan subscribers](/pricing/).
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 |
| --- | --- | --- | --- |
| `blockformats` | `blocks` | Menu item | No behavioral changes. |
| `formatselect` | `blocks` | Toolbar item | No behavioral changes. |
| `imagetools` | `editimage` | Plugin | NB: *Image Tools* is now *Enhanced Image Editing*, a [Premium plugin](/tinymce/features/#productivity). |
| `imagetools_toolbar` | `editimage_toolbar` | Option | NB: *Image Tools* is now *Enhanced Image Editing*, a [Premium plugin](/tinymce/features/#productivity). |
| `imagetools_proxy` | `editimage_proxy` | Option | NB: *Image Tools* is now *Enhanced Image Editing*, a [Premium plugin](/tinymce/features/#productivity). |
| `imagetools_cors_hosts` | `editimage_cors_hosts` | Option | NB: *Image Tools* is now *Enhanced Image Editing*, a [Premium plugin](/tinymce/features/#productivity). |
| `imagetools_credentials_hosts` | `editimage_credentials_hosts` | Option | NB: *Image Tools* is now *Enhanced Image Editing*, a [Premium plugin](/tinymce/features/#productivity). |
| `imagetools_fetch_image` | `editimage_fetch_image` | Option | NB: *Image Tools* is now *Enhanced Image Editing*, a [Premium plugin](/tinymce/features/#productivity). |
| `images_upload_timeout` | `editimage_upload_timeout` | Option | NB: *Image Tools* is now *Enhanced Image Editing*, a [Premium plugin](/tinymce/features/#productivity). |
| `fire()` | `dispatch()` | API | `fire()` 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` but has also been marked as *deprecated*. |
| `font_formats` | `font_family_formats` | Option | No behavioral changes, but there are related toolbar and menu items changes. |
| `fontselect` | `fontfamily` | Toolbar item | No behavioral changes. |
| `fontformats` | `fontfamily` | Menu item | No behavioral changes. |
| `fontsize_formats` | `font_size_formats` | Option | No behavioral changes. |
| `fontsizeselect` | `fontsize` | Toolbar item | No behavioral changes. |
| `fontsizes` | `fontsize` | Menu item | No behavioral changes. |
| `formatpainter_blacklisted_formats` | `formatpainter_ignored_formats` | Option | No behavioral changes. |
| `getWhiteSpaceElements()` | `getWhitespaceElements()` | Function | This function is part of the `Schema` API. It was renamed as part of a general renaming that treats *Whitespace* as a single word. The behavior of the function has not changed. |
| `getShortEndedElements` | `getVoidElements` | API | `special` and `void` are hard-coded elements defined by the HTML parsing specification. They can not be changed at run-time. The previous API name did not make it clear it was these, hard-coded, elements being called. |
| `content` | `html` | Command | This `mceInsertClipboardContent` argument was renamed to better reflect what data is passed. NB: The `content` argument can no longer be used with `mceInsertClipboardContent`. If `content` is used, no data is passed. |
| `lineheight_formats` | `line_height_formats` | Option | No behavioral changes. |
| `default_link_target` | `link_default_target` | Option | Changed for consistency with other `link` and `autolink` options. The functionality, and the values the option can take remain unchanged. This change applies to both `link` and `autolink` plugins. |
| `rel_list` | `link_rel_list` | Option | Changed for consistency with other options. The functionality, and the values this option can take remain unchanged. |
| `target_list` | `link_target_list` | Option | Changed for consistency with other options. The functionality, and the values this option can take remain unchanged. |
| `mceInsertTable` | `mceInsertTableDialog` | Command | Use `mceInsertTableDialog` to open the *Insert Table* dialog box. NB: `mceInsertTable` (with appropriate arguments) still works to insert a table directly into an existing document. `mceInsertTable` can no longer be used to invoke the *Table* dialog box, however. |
| `noneditable_noneditable_class` | `noneditable_class` | Option | After upgrading, rename the options in your TinyMCE init configuration to match the new name. For example, `noneditable_noneditable_class: 'mceNonEditable'` must be renamed `noneditable_class: 'mceNonEditable'`. |
| `noneditable_editable_class` | `editable_class` | Option | After upgrading, rename the options in your TinyMCE init configuration to match the new name. For example, `noneditable_editable_class: 'mceEditable'` must be renamed `editable_class: 'mceEditable'`. |
| `styleselect` | `styles` | Toolbar item | No behavioral changes. |
| `formats` | `styles` | Menu item | No behavioral changes. |
| `textpattern_patterns` | `text_patterns` | Option | After upgrading, rename the options in your TinyMCE init configuration to match the new name. Also, remove `textpattern` from your plugins list. This name-change is consequent to `textpattern` being changed from a Plugin to being part of the TinyMCE Core. |
| `tinymce.Env.browser.isChrome` | `tinymce.Env.browser.isChromium` | API | Updated so the API better reflects what it is checking for. `isChrome` implies it is checking for *Google Chrome*. However, it is actually checking for any Chromium-based browser (eg Chromium, Google Chrome, or Chrome Edge) so `isChromium` more accurately reflects what is being done. |
| `tinymce.Env.os.isOSX` | `tinymce.Env.os.isMacOS` | 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. |
| `toc` | `tableofcontents` | 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](/tinymce/features/#productivity). |
| `tocupdate` | `tableofcontentsupdate` | Toolbar item | This presents in the toolbar’s tooltip text. NB: *Table of Contents* is now a [Premium plugin](/tinymce/features/#productivity). |
| `toc_class` | `tableofcontents_class` | Option | NB: *Table of Contents* is now a [Premium plugin](/tinymce/features/#productivity). |
| `toc_depth` | `tableofcontents_depth` | Option | NB: *Table of Contents* is now a [Premium plugin](/tinymce/features/#productivity). |
| `toc_header` | `tableofcontents_header` | Option | NB: *Table of Contents* is now a [Premium plugin](/tinymce/features/#productivity). |

- **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 |
| --- | --- | --- | --- |
| `a11ychecker_html_version` | `html4` | `html5` |  |
| assignment operator character | `:` | `~` | Changed in the `valid_elements` and `extended_valid_elements` schemata. |
| `element_format` | *no default value assigned* | `html` | Changed as part of modernising TinyMCE’s default behavior. |
| `height` | `200px` | `400px` | Changed to improve user experience. |
| `link_default_protocol` | `http` | `https` | Changed as part of modernising TinyMCE’s default behavior. |
| TinyMCE `schema` | *no default value assigned* | `html5` | Changed as part of modernising TinyMCE’s default behavior. |
| `table_style_by_css` | `false` | `true` | Changed as part of modernising TinyMCE’s default behavior. |
| `table_use_colgroups` | `false` | `true` | 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 | `$` was a shorthand function of `DomQuery` and `Sizzle`. |
| `addComponents` | API | From `AddOnManager`. |
| `autoresize_on_init` | Option |  |
| `block_elements` | Schema option |  |
| `boolean_attributes` | Schema option |  |
| `Class` | API |  |
| `clearInterval` | API | From `Delay`. |
| `clearTimeout` | API | From `Delay`. |
| `Color` | API |  |
| `content_editable_state` | Option |  |
| `debounce` | API | From `Delay`. |
| `dependencies` | API | From `AddOnManager`. |
| `DomQuery` | API |  |
| `editor_deselector` | Option | From `EditorManager`. |
| `editors` | Property | From `EditorManager`. |
| `editor_selector` | Option | From `EditorManager`. |
| `elements` | Option | From `EditorManager`. |
| `execCallback` | API |  |
| `file_browser_callback_types` | Option |  |
| `filepicker_validator_handler` | Option | Superseded by `file_picker_validator_handler`. |
| `force_hex_style_colors` | Option |  |
| `force_p_newlines` | Option | Superseded by `forced_root_block`. |
| `forced_root_block: false` | Option | `forced_root_block` must be a non-empty string and cannot take a value of `false`. |
| `forced_root_block: ''` | Option | `forced_root_block` must be a non-empty string and cannot take a value of `false`. |
| `gecko_spellcheck` | Option | Replaced by `browser_spellcheck`. |
| `images_dataimg_filter` | Option |  |
| `JSON` | API | Use the native `JSON` [API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) instead. |
| `JSONP` | API |  |
| `JSONRequest` | API |  |
| `mode` | Option | From `EditorManager`. |
| `move_caret_before_on_enter_elements` | Schema option |  |
| `non_empty_elements` | Schema option |  |
| `padd_empty_with_br` | Option | Replaced, as of TinyMCE 6.6.1, by [`pad_empty_with_br`](../content-filtering/#pad_empty_with_br). |
| `requestAnimationFrame` | API | From `Delay`. |
| `self_closing_elements` | Schema option |  |
| `setIconStroke` | API |  |
| `setInterval` | API | From `Delay`. |
| `setMode` | API |  |
| `setTimeout` | API | From `Delay`. |
| `short_ended_elements` | Schema option |  |
| `Sizzle` | API |  |
| `special` | Schema option |  |
| `text_block_elements` | Schema option |  |
| `text_inline_elements` | Schema option |  |
| `throttle` | API | From `Delay`. |
| `toolbar_drawer` | Option | Superseded by `toolbar_mode`. |
| `types` | Option | From `EditorManager`. |
| `whitespace_elements` | Schema option |  |
| `validate` | Schema option |  |
| `XHR` | API | Any remaining `XHR` uses have been replaced with [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). |

##### 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 |
| --- | --- |
| `editor.editorCommands.hasCustomCommand` | API |
| `mceResetDesignMode` | Command |
| `mceRepaint` | Command |
| `mceBeginUndoLevel` | Command |

For additional details on TinyMCE 6.0 changes, see [TinyMCE 6.0 release notes overview](../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

1. focus is switched away from the editor; and
2. changes have been made in the editor since focus was switched to it.

> **Note:** 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.

1. `isDisabled()` functions are now `isEnabled()` functions.

Configurations that called `isDisabled()` must now call `isEnabled()`. Also, the returned or set value must be interpreted in terms of the new function name. For example, if `isDisabled(false)` was previously called, the equivalent new call is `isEnabled(true)`.
2. The `enable()` and `disable()` functions are now the single `setEnabled(<state>)` function.

Rather than calling the function to set the desired state, call `setEnabled()` with the `true` or `false` value to set the desired state.
3. The `disable(<name>)` and `enable(<name>)` functions are now the single `setEnabled(<name>, <state>)` function in the Dialog APIs.

As well, the `.disabled` property is now the `.enabled` property in all TinyMCE dialog APIs.
4. 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*](../apis/tinymce.notificationmanager/) 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.

> **Note:** 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.

> **Note:** The `SetContent` `content` property now returns an empty string in some cases.

### StyleSheetLoader

Previously, when loading a requested resource, `StyleSheetLoader` passed a `success` or `failure` callback to report the status of the request. In TinyMCE 6, `StyleSheetLoader` reports this status by returning a `Promise`.

### ThemeManager

Previously, when loading a requested resource, the `ThemeManager` passed a `success` or `failure` callback to report the status of the request. In TinyMCE 6, `ThemeManager` reports this status by returning a `Promise`.

## 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.

> **Note:** 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.

> **Note:** 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'`.

> **Note:** 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*](../6.0-release-notes-core-changes/#removed-or-deprecated-options-textpattern), 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.

> **Note:** 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:

1. An array of strings:

`plugins: [ 'advlist', 'lists', 'image', 'help', 'wordcount' ]`
2. A space-separated string:

`plugins: 'advlist lists image help wordcount'`
3. 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.

> **Note:** 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](/docs/release-notes/6.0-upcoming-changes/):

1. `fullpage`
2. `bbcode`
3. `legacyoutput`
4. `tabfocus`
5. `spellchecker`

Four plugins were removed because their functionality is now a Core part of TinyMCE 6.0:

1. `hr`
2. `noneditable`
3. `paste`
4. `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:

1. `colorpicker`
2. `contextmenu`
3. `textcolor`

> **Note:** The [Premium plugin](/tinymce/features/#productivity), [Spell Checker Pro](../introduction-to-tiny-spellchecker/), which offers equivalent functionality and more, is available.

> **Note:** 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*](../6.0-release-notes-core-changes/#removed-or-deprecated-plugins-imagetools), the `imagetools` plugin is no longer included as part of the Free editor.

*Image Tools* is now *Enhanced Image Editing*, a [Premium plugin](/tinymce/features/#productivity).

The `imagetools_proxy` option has been renamed to `editimage_proxy`. However, when setting up [Tiny services](../introduction-to-premium-selfhosted-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](/pricing/) that provides access to [Enhanced Image Editing](../editimage/).

> **Note:** 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*](../6.0-release-notes-core-changes/#changed-plugins-media), 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.

> **Note:** 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*](../6.0-release-notes-premium-changes/#mentions) for an alternative to the `getUsers` API.

### Paste

As noted in the [*TinyMCE 6.0 Release Notes*](../6.0-release-notes-core-changes/#removed-or-deprecated-plugins-paste), 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:

1. A `paste` default has changed. The `paste_data_images` option now defaults to `true`.

When `paste` was a plugin, this option was, by default, set to `false`, which prevented images being pasted from the local machine.
2. The `mceInsertClipboardContent` argument, `content`, has been renamed. It is now `html`.

The new name is a more accurate reflection of what sort of data the argument passes.

The `content` argument can no longer be used with `mceInsertClipboardContent`. If `content` is used, no data is passed. `mceInsertClipboardContent` only attempts to pass data if the `html` or `text` property is used.
3. The, now built-in, `paste` functionality no longer supports pasting from Microsoft Word.

There is an open [request for maintainers](https://github.com/tinymce/tinymce/discussions/7487) 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.

> **Note:** The Premium plugin, [PowerPaste](../introduction-to-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.

> **Note:** 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) 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:

```html
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*](../6.0-release-notes-core-changes/#new-and-improved-plugins-table-of-contents), the `toc` plugin is no longer part of the Free editor.

Table of Contents has been updated and is now a [Premium plugin](/tinymce/features/#productivity).

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](/pricing/) that provides access to Premium plugins such as [Table of Contents](../tableofcontents/).

The new Premium `tableofcontents` plugin also changes the names of several elements.

| Old name | New name |
| --- | --- |
| `toc` | `tableofcontents` |
| `tocupdate` | `tableofcontentsupdate` |
| `toc_class` | `tableofcontents_class` |
| `toc_depth` | `tableofcontents_depth` |
| `toc_header` | `tableofcontents_header` |

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.

> **Note:** 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` and `i` elements were automaticlly transformed into `strong` and `em` elements respectively.

If, however, you explicitly set the schema to `html5`, `b` and `i` elements were preserved.

With this release, `html5` is explicitly set as the schema by default, *and* `b` and `i` elements are automatically transformed into `strong` and `em` elements.

That is, the element transformation persists even though the `html5` schema is now explicitly set.

> **Note:** `html5-strict` is still an available schema option and is unchanged from TinyMCE 5.x.
- The assignment operator character — `:` — has been changed to `~` for the `valid_elements` and `extended_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` and `extended_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 for `valid_elements` and `extended_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]`.

> **Note:** 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.

> **Note:** 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 | `font_formats` | `font_family_formats` |
| Toolbar item | `fontselect` | `fontfamily` |
| Menu item | `fontformats` | `fontfamily` |
| Option | `fontsize_formats` | `font_size_formats` |
| Toolbar item | `fontsizeselect` | `fontsize` |
| Menu item | `fontsizes` | `fontsize` |
| Toolbar item | `formatselect` | `blocks` |
| Menu item | `blockformats` | `blocks` |
| Toolbar item | `styleselect` | `styles` |
| Menu item | `formats` | `styles` |
| Option | `lineheight_formats` | `line_height_formats` |

> **Note:** 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](https://github.com/tinymce/tinymce/blob/release/5.10/modules/tinymce/src/core/main/ts/fmt/DefaultFormats.ts#L27-L117) from TinyMCE 5.x’s `DefaultFormats.ts`) must be added to the `format` configuration:

```js
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](../apis/tinymce.formatter/#register) 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](https://github.com/tinymce/tinymce/blob/release/5.10/modules/tinymce/src/core/main/ts/api/html/SaxParser.ts), `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:

1. the [native browser API](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser), `DOMParser()`; and
2. the Free and Open Source *[XSS sanitizer for HTML, MathML and SVG](https://github.com/cure53/DOMPurify)*, DOMPurify.

> **Note:** 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](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model). As part of this process, `DOMParser` attempts to correct malformed HTML.

For example, the following string:

```html
<p>
<a href="https://example.com">Click here.
</p>
```
When this string is passed in, the `DOMParser` API adds the missing closing anchor tag:

```html
<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.

> **Note:** `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

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  xss_sanitization: false
});
```

> **Warning:** 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.