TinyMCE Skin options

TinyMCE comes with several premium skins which change the look of the editor. These skins are an easy way to restyle TinyMCE to better suit applications.

Skins vs Content CSS:

Skins change the look of both TinyMCE’s UI and the editable area (when the skin includes both skin.css and content.css files). The content_css option only styles the editable area. If both skin and content_css are used, content_css will override the skin’s content styles, allowing mixing and matching of UI and content styles.

The default skin does not require any configuration, though it must be imported when bundling for deployment: For example:

import 'tinymce/skins/ui/oxide/skin';

Replacing the default skin uses the skin and skin_url settings.

Available skins

See Enhanced Skins & Icon Packs for a list of available skins and the icon packs which look best with each skin.

Custom skins

Integrators can create and use their own skin files. For information on creating custom skins, see: Create a skin for TinyMCE.

Replacing the default skin

There are two options for replacing the default TinyMCE skin:

  • Use the skin option when the skin files are in the default location (for Tiny Cloud deployments, ZIP bundles, or when using NPM packages with bundling or file layering).

  • Use the skin_url option to specify a custom path to skin files, which is useful for custom skins or when using NPM packages without bundling. When using skin_url, the skin option is not required.

The default location TinyMCE tries to load skin files from is TINYMCE_BASE/skins/ui/${skinName}; where:

  • TINYMCE_BASE is the TinyMCE root directory (the directory containing tinymce.min.js).

  • ${skinName} is the name of the skin.

To load skins from another location, integrators must specify that location using skin_url.

  • When using TinyMCE from Tiny Cloud, ZIP bundles, or NPM packages with bundling or file layering, use skin.

  • When using custom skins or using NPM packages without bundling, use skin_url.

Understanding the skins folder structure:

The skins folder in the tinymce-premium NPM package and ZIP bundles contains both a ui folder and a content folder. Skins in the ui folder can include both skin.css (for UI styling) and content.css (for editable area styling). When a skin includes both files, using the skin option will apply both UI and content styles. The files in the content folder can also be used independently with the content_css option to style only the editable area.

Using skins and content_css together:

Skins that include both skin.css and content.css files will style both the UI and the editable area. The content_css option is not required when using such skins. However, if both skin and content_css are specified, content_css will override the skin’s content styles, allowing mixing and matching of UI and content styles.

skin

This option specifies the skin that TinyMCE should use, or false to not load a skin. The default skin included with TinyMCE is named "oxide".

Type: String or Boolean

Default value: 'oxide'

Possible values: the name of a skin or false

The name of the skin should match the name of the folder within the skins/ui directory of TinyMCE. If the specified skin is not found, TinyMCE will not load.

Example: using skin

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  skin: 'fabric'
});

For information on creating custom skins, see: Create a skin for TinyMCE.

skin_url

This option specifies the location of the skin directory. This is useful when loading TinyMCE and the skin files from different locations.

When using skin_url, the skin option is not required. The skin_url option points directly to the skin directory location.

Type: String

Example: using skin_url

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  skin_url: '/css/mytinymceskin' // change this to point to the folder of skin files
});

Example: loading premium skins from tinymce-premium (NPM)

Configure the skin_url to point at the appropriate location. For example:

tinymce.init({
  selector: 'textarea',
  skin_url: '/<path_to_premium_skins>/ui/fabric'
});

  • Ensure the skin directory is accessible to the application. Many projects copy the required skin into a static assets folder (such as /public/skins/ui/oxide) during their build step.

  • Combine this with the approaches listed in Premium skins from tinymce-premium to match the deployment strategy.