TinyMCE 4 skins installation

TinyMCE theming how-to

When you want to style your editor you need to change its theme. TinyMCE themes distribute separately from TinyMCE 4 and are called skins.

To witch TinyMCE to another theme please user skin parameter in your configuration file:

tinymce.init({
    selector: "#editor",
    skin: "charcoal"
});

When using some non-standard skin please copy it into directory tinymce/skins/ in order it to be found by TinyMCE.

Now your editor looks like:

Screenshot of charcoal TinyMCE skin

TinyMCE 4 skins list

Skin name Appearance
charcoal Charcoal theme screenshot
tundora Tundora theme screenshot
xenmce Xenmce theme screenshot
pepper-grinder Pepper-grinder theme screenshot
lightgray-no-fonts Lightgray-no-fonts theme screenshot

More manuals and guides

How to install TinyMCE 4 in five minutes
The article comparing two similar editors and explaining what to choose
The manual explains how to make TinyMCE 4 to TinyMCE 5 migration easy
Browse all docs