Binding Classes to Item Types
Binding classes to item types in the editor
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
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
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
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.