Binding Classes to Item Types

Binding classes to item types in the editor

Hello, friends

Recently we have introduced the binding of classes to the types of elements in our editor and want to share how to use it!

Perhaps you did not know, but some elements have predefined styles, such as headers, paragraphs, etc. they have external indents, and to get rid of them you just need to set these elements an external indent value of 0. All would be fine, but what if you have a few dozen paragraphs on the page!

You can certainly bind to a class whose external indents are set to 0, but anyway, to this class it is necessary to tie all these elements, and if you added a new paragraph or title - you need to bind it too to this class, and it isn’t comfortable.

What to do?

Everything is very simple! Consider, for example, we added two first and second level headers and created pre-classes List of classes to bind to item types

The names show that the class named All headers will affect the headings of all levels, Headings lvl. 1 only on the headings of the first level and Headings lvl. 2 only on the headers of the second level, but we will not apply it.

First, we bind the All headers class to the headers of all levels. Select the class, and see the new button Button for linking a class to elements

List of editor element types Clicking on it, we will see a list of all types of elements supported by the editor. We need to select all the headings from 1 to 6 levels, as shown in the figure. All! Now the class is tied to headings, you can close the list of item types by clicking on the drop-down list.

Now you can set any styles for this class and they will affect only at the headings from 1 to 6 levels. We, for example, installed a gray background and external indents in 10px. And if we want to highlight only the level 1 headers with an additional style? No problem...

Class binding to the level 1 headings

Selecting a heading for level 1 All the same as with all the headers, in the example we already added a class named Headers level 1. We just need to select it and bind it to the level 1 headings by selecting only the Level 1 header in the item menu, as in the previous example. After binding, for example, set the white color of the text for these headers.


Thus, you can combine styles for different types of elements, when you insert a new element, the styles set for this element type will be applied automatically, which is very convenient, especially if the elements of the desired type are very many. The image below shows that all the headings have a gray background and there are indents only for the title of level 1 - white text color, as we wanted The result of an example of class binding to elements
Best regards, team