Bundling TinyMCE skins using module loading

Overview

This section shows the files required for each TinyMCE component. 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 skin 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';

.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');

.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');
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