Formats
Use formats to customize Visual Editor
The Visual Editor can be extended with styles from style sheets (CSS) and it uses a number of images for its GUI buttons.
They appear in:
as well as buttons on the editor's toolbar.
All is set up via its configuration file:
~\Frontend\Config\VisualEditor\common.xml
This is where you map styles etc to the buttons and selector items by using "formats".
What are "formats"?
Visual Editor uses "formats" to apply styles to the objects in the content. There are 3 types of objects you can apply a style to:
- An inline selection
Example: part of a text
The format for this object wraps up the inline selection with the tag and optionally style class specified. The inline format can be only represented as a button. The button gets enabled only if the user makes an explicit selection, for example, one or more characters in a text.
- A block selection
Example: a paragraph (<p>)
The format for this object wraps up the block selection with a tag and optionally a style class specified. The block selection can be represented as both a button and an item in the style selector. Normally, the button and the item are always enabled as long as the cursor is within the block element (no need to select the entire element.)
- An element selection (selector)
Example:<img/>
The format for this object adds the specified class to the element (<img class="no-border" />). The element selection can be represented as both a button and an item in the class selector.
What are "groups" and "radio groups"?
Each format must be defined within either a group or a radio group. The latter is used to group mutually exclusive formats and is similar to radio buttons in their behavior.
The formats that belong to the same group or radio group will appear separated from other buttons with a separator (|).
The formats defined for block selections will appear in the style selector and block selector. The formats for element selections will appear in the class selector.