Important changes to Tiny Cloud pricing > Find out more

Bundling TinyMCE content CSS using module loading

Information on bundling the editor content CSS using module loading

Contribute to this page


This section shows the files required for each TinyMCE content CSS. 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 content CSS file:


Example syntax for including the example content CSS in a bundle:

Module Syntax Source Example
ES6+ npm
import contentCSS from 'tinymce/skins/content/example/content.css';
import contentCSS from '../tinymce/skins/content/example/content.css';
Common JS npm
var contentCSS = require('tinymce/skins/content/example/content.css');
var contentCSS = require('../tinymce/skins/content/example/content.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.




For information on premium content CSS, see: Tiny Skins and Icon Packs.

Material (Classic)
Material (Outline)

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.