Bundling TinyMCE content CSS using module loading

Overview

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/
├── 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 content CSS file:

./skins/content/example/content.css

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

Module Syntax Source Example

Module Syntax	Source	Example
ES6+	npm	`import contentCSS from 'tinymce/skins/content/example/content.css';`
`.zip`	`import contentCSS from '../tinymce/skins/content/example/content.css';`
Common JS	npm	`const contentCSS = require('tinymce/skins/content/example/content.css');`
`.zip`	`const contentCSS = require('../tinymce/skins/content/example/content.css');`

ES6+

npm

import contentCSS from 'tinymce/skins/content/example/content.css';

.zip

import contentCSS from '../tinymce/skins/content/example/content.css';

Common JS

npm

const contentCSS = require('tinymce/skins/content/example/content.css');

.zip

const contentCSS = require('../tinymce/skins/content/example/content.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

Default

./skins/content/default/content.css

Dark

./skins/content/dark/content.css

Document

./skins/content/document/content.css

Writer

./skins/content/writer/content.css

Premium

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

Fabric

./skins/content/fabric/content.css

Fluent

./skins/content/fluent/content.css

Material (Classic)

./skins/content/material-classic/content.css

Material (Outline)

./skins/content/material-outline/content.css