Customizing the editor UI

Learn how to change the appearance of TinyMCE.

Contribute to this page

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 using the TinyMCE Skin Creator.

Skins

TinyMCE skins only change the editor’s appearance while TinyMCE themes can affect much more. Use the TinyMCE Skin Creator to easily create skins. Download, unzip, and place the completed skin in the js/skins folder.

The following example activates the skin:

tinymce.init({
  selector: 'textarea'  // change this value according to your HTML
  skin: 'oxide'  // use the name of your skin, not oxide
});

Ensure the name of the created skin matches the name of the folder in the skins directory (ie. tinymce/js/skins). TinyMCE cannot load if the specified skin is not found.

Note: 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, paddings, 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 height and width.

Note: The links below contain specific details of these customization options.

Set the editable area height

Important: The “editable area” is the textbox used to enter information. This “editable area” is different from the “editor” itself.

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

Note: The editable area width is effectively the width of the editor itself. This is not the case for height.

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, 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 Autoresize Plugin. Users can resize the editor on both the horizontal and vertical access by dragging the status bar handle 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.

Use the same css file that controls the look and style of the content TinyMCE is integrated into in this setting. 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. The following example disables the status bar.

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

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

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

The following example displays the default toolbar in addition to the code functionality:

tinymce.init({
  selector: 'textarea',
  toolbar: 'undo redo styleselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code',
  plugins: 'code'
  });

The ability to customize the user interface is an integral part of ensuring an integrated and complete user experience.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.