Bundling TinyMCE skins using module loading

File structure

This section shows the files required for each TinyMCE skin. The file paths shown are relative to the root TinyMCE package directory, where tinymce.min.js is stored. For example:

./
├── icons/
├── langs/
├── license.txt
├── models/
├── plugins/
├── readme.txt
├── skins/
├── themes/
├── tinymce.d.ts
├── tinymce.js
├── tinymce.min.js
└── version.txt

The following table shows examples of the syntax used to bundle the following skin:

Required files for the example skin:

./skins/ui/example/content.css
./skins/ui/example/skin.css

Optional files for the example skin:

/* Only required for inline editors */
./skins/ui/example/content.inline.css

Example syntax for including the example icon pack in a bundle:

The handling of content CSS files (such as content.css or content.min.css) varies between bundling tools. View the relevant guide for the required syntax at Bundling TinyMCE with a module loader.

Community Skins

Default skin (oxide)
./skins/ui/oxide/content.css
./skins/ui/oxide/content.inline.css
./skins/ui/oxide/skin.css
./skins/ui/oxide/skin.shadowdom.css
Dark skin (oxide-dark)
./skins/ui/oxide-dark/content.css
./skins/ui/oxide-dark/content.inline.css
./skins/ui/oxide-dark/skin.css
./skins/ui/oxide-dark/skin.shadowdom.css
TinyMCE 5 skin (tinymce-5)
./skins/ui/tinymce-5/content.css
./skins/ui/tinymce-5/content.inline.css
./skins/ui/tinymce-5/skin.css
./skins/ui/tinymce-5/skin.shadowdom.css
TinyMCE 5 dark skin (tinymce-5-dark)
./skins/ui/tinymce-5-dark/content.css
./skins/ui/tinymce-5-dark/content.inline.css
./skins/ui/tinymce-5-dark/skin.css
./skins/ui/tinymce-5-dark/skin.shadowdom.css

Enhanced Skins

For information on Enhanced editor skins, see: Enhanced Skins & Icon Packs.

Bootstrap skin
./skins/ui/bootstrap/content.css
./skins/ui/bootstrap/content.inline.css
./skins/ui/bootstrap/skin.css
./skins/ui/bootstrap/skin.shadowdom.css
Borderless skin
./skins/ui/borderless/content.css
./skins/ui/borderless/content.inline.css
./skins/ui/borderless/skin.css
./skins/ui/borderless/skin.shadowdom.css
Fabric skin
./skins/ui/fabric/content.css
./skins/ui/fabric/content.inline.css
./skins/ui/fabric/skin.css
./skins/ui/fabric/skin.shadowdom.css
Fluent skin
./skins/ui/fluent/content.css
./skins/ui/fluent/content.inline.css
./skins/ui/fluent/skin.css
./skins/ui/fluent/skin.shadowdom.css
Jam skin
./skins/ui/jam/content.css
./skins/ui/jam/content.inline.css
./skins/ui/jam/skin.css
./skins/ui/jam/skin.shadowdom.css
Material (Classic) skin
./skins/ui/material-classic/content.css
./skins/ui/material-classic/content.inline.css
./skins/ui/material-classic/skin.css
./skins/ui/material-classic/skin.shadowdom.css
Material (Outline) skin
./skins/ui/material-outline/content.css
./skins/ui/material-outline/content.inline.css
./skins/ui/material-outline/skin.css
./skins/ui/material-outline/skin.shadowdom.css
Naked skin
./skins/ui/naked/content.css
./skins/ui/naked/content.inline.css
./skins/ui/naked/skin.css
./skins/ui/naked/skin.shadowdom.css
Outside skin
./skins/ui/outside/content.css
./skins/ui/outside/content.inline.css
./skins/ui/outside/skin.css
./skins/ui/outside/skin.shadowdom.css
Small skin
./skins/ui/small/content.css
./skins/ui/small/content.inline.css
./skins/ui/small/skin.css
./skins/ui/small/skin.shadowdom.css
Snow skin
./skins/ui/snow/content.css
./skins/ui/snow/content.inline.css
./skins/ui/snow/skin.css
./skins/ui/snow/skin.shadowdom.css

Premium skins from tinymce-premium (NPM)

The tinymce-premium NPM package ships all premium skins in tinymce-premium/skins/. Choose one of the following patterns depending on how TinyMCE is deployed:

Bundling (recommended for modern build tools)

  • Import the required skin files so the module bundler adds them to the application bundle. For example, importing the default skin (oxide):

    import 'tinymce-premium/skins/ui/oxide/skin.css';
import contentUiSkinCss from 'tinymce-premium/skins/ui/oxide/content.css';
// ... other TinyMCE imports

  • After bundling, set skin: false and content_css: false in the editor configuration, then use content_style to inject the bundled CSS.

Non-bundling with file layering

  • When hosting directly from node_modules, copy node_modules/tinymce-premium/skins/ into node_modules/tinymce/skins/ as part of the build or deployment step (for example, in a postinstall script).

  • Once copied, premium skins live beside the core files, so setting skin works without extra configuration.

Non-bundling with skin_url

  • Leave the premium skins in node_modules/tinymce-premium/skins/ and configure skin_url to point at the required skin directory.

  • This approach avoids moving files and is useful when the node_modules directory is web-accessible (or when copying only the specific skin to a public folder).