Customizing the editor UI
This section is about customizing TinyMCE’s user interface with skins, toolbar buttons, and manipulating the status bar.
Themes
Silver is TinyMCE’s default theme. Users can easily customize the menu or toolbar without having to edit the theme. Theme creation requires a more in depth-knowledge of TinyMCE’s API and is beyond the scope of this guide. TinyMCE skins, however, are easier to make.
Skins
Skins control the appearance of TinyMCE such as colors and spacing. The default skin is called Oxide (oxide
) and has a light
and a dark
version. To initialize the editor with the dark version of the default skin, use the following configuration:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
skin: 'oxide-dark',
content_css: 'dark'
});
To base the skin version on the user’s preference as specified in their operating system, use:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
skin: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'oxide-dark' : 'oxide'),
content_css: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default')
});
To create a skin interactively, visit the TinyMCE 6 Skin Tool. For information on manually creating skins for TinyMCE, see Creating a skin.
Developers often confuse the difference between TinyMCE "themes" and "skins". A Skin in TinyMCE is used to make changes to the appearance of the editor, for example, colors, margins, padding, fonts, icons, etc. A Theme creates the editor construction (left, top, bottom, or right of the editing area - vertical or horizontal, inline or outside, etc.). A skin usually changes the color scheme of a button, dialog, etc. while the theme applies to the whole editor including its functionality and has child skins to change the appearance. |
Changing editor height and width
A common UI customization used by developers is changing the height and width of the editable area. The following examples are code snippets that change TinyMCE’s height and width.
The links below contain specific details of these customization options. |
Set the editable area height
tinymce.init({
selector: 'textarea', // change this value according to your HTML
height: 300
});
See the height option for customization details.
Set the editable area width
tinymce.init({
selector: 'textarea', // change this value according to your HTML
width: 300
});
See the width option for customization details.
Set maximum and minimum heights and widths
The following code snippets use several options for the maximum and minimum values for heights and widths of the editable area.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
max_height: 500,
max_width: 500,
min_height: 100,
min_width: 400
});
See the max_height, max_width, min_height, and min_width documentation pages to learn more about these customization options.
The editable area can also automatically resize itself as the user enters content into the iframe with the resize configuration option.
Customizing the editable area with content_css
Use the content_css
customization option to ensure that TinyMCE’s editable area has the same styling as the surrounding content.
TinyMCE comes with six content CSS files:
-
default
-
dark
-
document
-
writer
-
tinymce-5
-
tinymce-5-dark
These content CSS files can be enabled in the editor using the content_css
configuration option.
For example:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
content_css: 'writer'
});
These content CSS files can also be used as a template for creating a custom content CSS file for the editor. For the CSS files, see: tinymce-dist GitHub Repository - Content CSS files.
Tiny also provides content CSS files with the premium skins, for a list of premium content CSS files, see: Tiny Skins and Icon Packs.
Tiny recommends using the same CSS for both the editor and the page where the editor content will be rendered.
The following example includes the file mycontent.css
in all of the pages to control the site’s global appearance. This example ensures the content in the editable area contains the same style as the site.
Example using an absolute path
// File: http://domain.mine/mysite/index.html
tinymce.init({
selector: 'textarea', // change this value according to your HTML
content_css: '/mycontent.css' // resolved to http://domain.mine/mycontent.css
});
See the content_css customization page for more information about the use of absolute and relative paths as well as and how to use multiple stylesheets.
Hiding the status bar
The status bar is the gray bar aligned to the bottom of the editor’s editable area. The status bar contains the path information and the resize handle. Removing the status bar disables the ability for users to change the size of the editable area.
Example: hiding the status bar
The following example disables the status bar.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
statusbar: false
});
Refer to the plugins and advanced configuration options documentation for more information on how to restrict whether the resize handle can be dragged. |
Adding the code button plugin
One popular toolbar button that is not loaded with the "Silver" theme is the code
button. Clicking the code
button displays a dialog box containing the raw HTML hidden behind TinyMCE’s interface.
Additional functionality may require the inclusion of a plugin |
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'code',
toolbar: 'code'
});
All of the buttons disappear after the code
button is added to the toolbar and a new menu called Tools
with the menu item Source code
is created. (See this page for a basic HTML code block.)
Premium upgrade promotion option
promotion
TinyMCE 6.2 and later includes the promotion
option. It controls the presentation or otherwise of a Tiny-specific promotion button.
Type: Boolean
Default value: true
in Community self-hosted instances; otherwise false
.
Possible values: true
, false
See Premium upgrade promotion defaults for details.
Example: using promotion
tinymce.init({
selector: "textarea", // change this value according to your HTML
promotion: true
});
The Upgrade promotion appears in the unused corner of the TinyMCE menu bar. Consequently it does not appear if the menu bar is disabled.
The distribution-specific defaults are not fixed. Someone running TinyMCE as part of a Premium plan can turn this option on. And someone running the Community distribution of TinyMCE as a self-hosted instance can turn this option off. |
The ability to customize the user interface is an integral part of ensuring an integrated and complete user experience.