TinyMCE skins and icons

After setting up TinyMCE for the first time, you might wonder if it’s possible to customize the look and feel of the editor to enhance your UX.

It’s super easy – it pretty much takes just a flick of your wrist!

Hermione Granger waving a wand and gesturing as if to say

Skins and icon packs

Tiny’s Premium Skins and Icon Packs have been designed to give you loads of options when it comes to styling the editor to match your desired UI/UX. And they are now included with Tiny’s new Cloud Essential plan.

In this article, we’re going to demonstrate how to configure a few of our skins and icon packs. For more information, check out our comprehensive Premium Skins and Icon Packs documentation.

You might also be interested in our blog post on configuring TinyMCE toolbar options.

Let’s get started.

Play along

Try these configurations by modifying the init script in your own instance of TinyMCE or by using a TinyMCE Fiddle.

For example, open a TinyMCE Fiddle and paste in the following code:

<script type="text/javascript">
tinymce.init({
    selector: "textarea"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

When you click Run, you’ll get an instance of TinyMCE with the default config.

TinyMCE running with the default config.

Our newest skins

Three new skins were released at the same time as TinyMCE 5.2, designed specially to give you more options and flexibility when it comes to integrating it with your own modern designs.

The “snow” skin

TinyMCE default config with *snow* skin and *thin* icons.

The snow skin has been designed to provide a modern and lightweight editor for web apps. It looks great together with the thin icon pack.

Configuring TinyMCE with the snow skin is as easy as adding one line of code skin: "snow" to the init script. Try adding the thin icons too by adding icons: "thin".

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    skin: "snow",
    icons: "thin"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

Here’s a live example:

The “naked” skin

TinyMCE default config with *naked* skin.

The naked skin completely removes the outside borders as well as the borders separating the toolbar, menubar and statusbar. It’s been designed so you can use it with your own custom editor frame where you want a clean and simple text input experience, such as chat or comments.

Similarly, you can configure TinyMCE with the naked skin, by adding one line of code skin: "naked" to the init script.

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    skin: "naked"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

Here’s a live example:

The “outside” skin

TinyMCE default config with *outside* skin.

The outside skin completely removes the outside borders, but provides a thin border around the editable area. Like the naked skin, this one is designed for a clean and simple text input experience for chat or comment applications.

Again, all it takes is one line of code – skin: "outside".

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    skin: "outside"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

Here’s a live example:

Our classic skins

We have several other skins available. Here’s a sneak peek at most of them. You can check out our documentation for the full range of Tiny MCE skins and icons.

There’s also an overview of our classic skins and icon packs in a previous blog post by Fredrik, our Principal Designer.

The “bootstrap” skin

The bootstrap skin closely follows the default Bootstrap design, especially the dialogs and buttons.

See our comprehensive blog post about how to enhance Bootstrap forms with our WYSIWYG editor.

The “material classic” skin

The material classic skin is based on the classic Material Design system. Here’s an example form built using the classical Material Design web components, and TinyMCE configured with the material classic skin and material icon pack. Also check out the material outline skin.

The “fabric” skin

The fabric skin follows the Microsoft Fabric UI, allowing you to build experiences that fit seamlessly into a broad range of Microsoft products. By default, it has no border around the editor to make it easier to implement as a fullscreen editor, but you can create one of your own.

The “borderless” skin

The borderless skin removes the outer border from the default editor, allowing you to wrap TinyMCE in your own. It’s a great option for fullscreen use. Check out the borderless skin demo.

Icon Packs

Again, configuring TinyMCE icons is as easy as adding one line of code. For example, to configure TinyMCE with the small icons, add icons: "small" to the init script.

Available values for icon packs:

material – designed for use with the material skins
small – designed for more compact scenarios, where horizontal space is limited (plus a small skin to match)
jam – based on the popular open source Jam icon library (plus a jam skin to match)
thin – designed for our new, lightweight snow skin

You can pretty much mix and match all of the skins and icon packs, but there are a few exceptions. Here’s a useful compatibility matrix.

Here’s an example of the jam skin and icons combo:

What next?

The Premium Skins and Icon Packs are included in our Cloud Essentials plan along with our popular PowerPaste plugin and 8 other premium plugins.

Get started with a 14 day free trial.

Although I’ve tried to be quite comprehensive here in this post, there’s plenty of information I’ve left out for the sake of brevity. Again, check out the related Premium Skins and Icon Packs documentation.