NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Bundling TinyMCE skins using module loading

Information on bundling TinyMCE skins using module loading

Contribute to this page

Overview

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/
├── jquery.tinymce.min.js
├── langs/
├── license.txt
├── 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
/* Only required when using the deprecated mobile theme */
./skins/ui/example/skin.mobile.css
./skins/ui/example/content.mobile.css
./skins/ui/example/fonts/tinymce-mobile.woff

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

Module Syntax	Source	Example
ES6+	npm	`import contentUiCss from 'tinymce/skins/ui/example/content.css'; import 'tinymce/skins/ui/example/skin.css'; /* Only required for inline editors */ import contentUiInlineCss from 'tinymce/skins/ui/example/content.inline.css';`
ES6+	`.zip`	`import contentUiCss from '../tinymce/skins/ui/example/content.css'; import '../tinymce/skins/ui/example/skin.css'; /* Only required for inline editors */ import contentUiInlineCss from '../tinymce/skins/ui/example/content.inline.css'`
Common JS	npm	`var contentUiCss = require('tinymce/skins/ui/example/content.css'); require('tinymce/skins/ui/example/skin.css'); /* Only required for inline editors */ var contentUiInlineCss = require('tinymce/skins/ui/example/content.inline.css');`
Common JS	`.zip`	`var contentUiCss = require('../tinymce/skins/ui/example/content.css'); require('../tinymce/skins/ui/example/skin.css'); /* Only required for inline editors */ var contentUiInlineCss = require('../tinymce/skins/ui/example/content.inline.css');`

Important: 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/content.mobile.css
./skins/ui/oxide/fonts/tinymce-mobile.woff
./skins/ui/oxide/skin.css
./skins/ui/oxide/skin.mobile.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/content.mobile.css
./skins/ui/oxide-dark/fonts/tinymce-mobile.woff
./skins/ui/oxide-dark/skin.css
./skins/ui/oxide-dark/skin.mobile.css
./skins/ui/oxide-dark/skin.shadowdom.css

Premium Skins

For information on premium editor skins, see: Tiny Skins and Icon Packs.

Bootstrap skin

./skins/ui/bootstrap/content.css
./skins/ui/bootstrap/content.inline.css
./skins/ui/bootstrap/content.mobile.css
./skins/ui/bootstrap/skin.css
./skins/ui/bootstrap/skin.mobile.css
./skins/ui/bootstrap/skin.shadowdom.css

Borderless skin

./skins/ui/borderless/content.css
./skins/ui/borderless/content.inline.css
./skins/ui/borderless/content.mobile.css
./skins/ui/borderless/skin.css
./skins/ui/borderless/skin.mobile.css
./skins/ui/borderless/skin.shadowdom.css

Fabric skin

./skins/ui/fabric/content.css
./skins/ui/fabric/content.inline.css
./skins/ui/fabric/content.mobile.css
./skins/ui/fabric/skin.css
./skins/ui/fabric/skin.mobile.css
./skins/ui/fabric/skin.shadowdom.css

Fluent skin

./skins/ui/fluent/content.css
./skins/ui/fluent/content.inline.css
./skins/ui/fluent/content.mobile.css
./skins/ui/fluent/skin.css
./skins/ui/fluent/skin.mobile.css
./skins/ui/fluent/skin.shadowdom.css

Jam skin

./skins/ui/jam/content.css
./skins/ui/jam/content.inline.css
./skins/ui/jam/content.mobile.css
./skins/ui/jam/skin.css
./skins/ui/jam/skin.mobile.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/content.mobile.css
./skins/ui/material-classic/skin.css
./skins/ui/material-classic/skin.mobile.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/content.mobile.css
./skins/ui/material-outline/skin.css
./skins/ui/material-outline/skin.mobile.css
./skins/ui/material-outline/skin.shadowdom.css

Naked skin

./skins/ui/naked/content.css
./skins/ui/naked/content.inline.css
./skins/ui/naked/content.mobile.css
./skins/ui/naked/skin.css
./skins/ui/naked/skin.mobile.css
./skins/ui/naked/skin.shadowdom.css

Outside skin

./skins/ui/outside/content.css
./skins/ui/outside/content.inline.css
./skins/ui/outside/content.mobile.css
./skins/ui/outside/skin.css
./skins/ui/outside/skin.mobile.css
./skins/ui/outside/skin.shadowdom.css

Small skin

./skins/ui/small/content.css
./skins/ui/small/content.inline.css
./skins/ui/small/content.mobile.css
./skins/ui/small/skin.css
./skins/ui/small/skin.mobile.css
./skins/ui/small/skin.shadowdom.css

Snow skin

./skins/ui/snow/content.css
./skins/ui/snow/content.inline.css
./skins/ui/snow/content.mobile.css
./skins/ui/snow/skin.css
./skins/ui/snow/skin.mobile.css
./skins/ui/snow/skin.shadowdom.css

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

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.