Bundling TinyMCE skins using module loading
Information on bundling TinyMCE skins using module loading
Contribute to this pageOverview
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 |
|
.zip |
| |
Common JS | npm |
|
.zip |
|
Important: The handling of content CSS files (such as
content.css
orcontent.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.