Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

A new approach to skinning TinyMCE 5

Fredrik Danielsson

August 15th, 2019

Written by

Fredrik Danielsson
Fredrik Danielsson

Category

News & Updates

In TinyMCE 5, we introduced a new method to style the editor that enables extensive skinning in a robust and supported way. One of the main reasons we introduced this new approach to skinning is that we strongly feel that the current approaches to customizing UIs is broken. We wanted to fix that.

The two most common ways today to customize third party components like date pickers, multi-selects – and editors – is to override the default CSS of the components, or to edit the stylesheet of the components. Either approach solves your immediate need for customization, but creates a number of issues down the road.

When customizing a component in either of these ways, you have effectively made a fork of the component. And then for every future update, you need to carefully review the code and make sure that the update doesn’t break your custom implementation.

Having to re-review this code with every update is inefficient and cumbersome and will in practice lead to you not updating third party components. Also, if you tinker with the component’s CSS, there is no way for the creator of the original code to support or test your implementation.

Despite our best intentions, many of us are guilty of doing something like this, using TinyMCE as an example:

.tox .tox-toolbar {
        background-color: #eee !important;
}

And then what happens when the classes and HTML change? That’s right, the styling breaks. The result is that every time you update the component, you have to test it.

And visual testing is notoriously difficult. There are visual diff tools you can use, but in most cases someone has to look at the screen and make a call if everything looks alright. And it’s even more difficult to test UI elements that aren’t readily visible like error messages and notifications.  And of course the more difficult testing is to do, the more time it takes.

We want TinyMCE to feel like a first class citizen in your app, which means it should be able to blend into your design seamlessly, with whatever customizations you think are necessary. We also want our customers to keep TinyMCE updated, since we continuously release new plugins, features, improvements and bug fixes. And we want to be able to offer support whenever you need it.

To help solve that core challenge of having a highly customized editor UI that doesn’t break with each update, we have introduced something we call the Style API for Oxide, the default skin for TinyMCE.

Introducing the Style API

The Style API is oriented around variables, and we have a lot of them – over three hundred variables for colors, font properties, margins, paddings and spacings. These variables are used to define the appearance of TinyMCE, instead of overriding the default skin’s CSS.

@toolbar-background-color: #10ac84;
@toolbar-button-icon-color: #fff;
@toolbar-button-width: 30px;
@toolbar-button-height: 20px;
@toolbar-group-spacing-y: 4px;
@tinymce-border-radius: 4px;

By using these variables to customize your editor UI, the underlying CSS, class names and HTML structure can change, making it easier to test that the changes don’t break the appearance of your editor.

Let’s take the toolbar. You can control the size, appearance and spacing between buttons, and create a radically different look and feel.

Just look at this example below. It’s a pretty different look from the default TinyMCE UI, right? And together with all the other configuration options, you can create a very unique editor.

And the best part is that by using the Style API, you can update TinyMCE and expect that all of your customizations will look the same. And if that’s not the case, then it’s likely a bug that we want to fix for you.

To learn more about creating your own skin, head over to the documentation.

Skins and Icons
Fredrik Danielsson
byFredrik Danielsson

Fredrik is Principal Designer at Tiny, responsible for choosing the exact right shade of gray for borders and icons.

Related Articles

  • Depiction of semantic versioning containing text - "Major. Minor. Patch!"
    News & Updates

    Improving our engineering best practices with semantic versioning

    by Millie Macdonald in News & Updates

Build beautiful content for the web with Tiny.

The rich text editing platform that helped launch Atlassian, Medium, Evernote and more.

Begin my FREE 30 day trial
Tiny Editor