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!
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.
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:
When you click Run, you’ll get an instance of TinyMCE 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
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
Here’s a live example:
The “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
Here’s a live example:
The “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 –
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.
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:
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.
Related blog posts: