In Question Editor's init options you can specify custom styles using the rich_text_editor.custom_styles
key. These custom styles are added to your editor's styles dropdown or, if you specify container styles, to the DIV button. You can specify a style's label, element and which class to add to the element. For div elements, you can also specify if the style should be treated as a container style. There are three types of custom styles with slight differences in behaviour: inline, block and container.
Inline Styles
If you specify an inline element likespan
or strong
as your custom style element, the custom style will appear in the styles dropdown of your editor. It will be added under the heading 'Inline Styles'. When clicked, an inline style will be applied to the current selection, or if no text is currently selected, it will be applied to whatever you type next. If you want to stop using an inline style, just click the selected style once more. To remove an inline style from a portion of your text, select that portion and click the inline style again.var initOptions = {
"rich_text_editor": {
"custom_styles": [
{
// Inline style example
"label": "Red font",
"element": "span",
"element_class": "red-font"
}
]
}
};
Block Styles
If you specify a block element likediv
or p
as your custom style element, the custom style will appear in the styles dropdown of your editor. It will be added under the heading 'Block Styles'. When clicked, a block style will be applied to the block of text you are currently editing. If you want to remove a block style in the editor, move your cursor to the block in question and click the block style or 'Normal'.var initOptions = {
"rich_text_editor": {
"custom_styles": [
{
// block style example
"label": "Red font",
"element": "p",
"element_class": "red-font"
}
]
}
};
Container Styles
If you specify div
as your custom style element, you have the option to declare the style a container style by settingis_container_style
to true
(it is false
by default). This will add a new button (DIV) to the editor's toolbar. When clicked, a dialog opens up allowing you to select your style.
A container style keeps the element you are currently editing and wraps it in a new div
element. This is different to a normal block style, which replaces the element you are currently editing. If you select several blocks of text, e.g. several paragraphs, all these paragraphs will be wrapped in a div
element. To remove a container style, move the cursor into the block, open the container style dialog, select 'Remove container' and click 'Ok'.
var initOptions = {
"rich_text_editor": {
"custom_styles": [
{
// container style example
"label": "Red font",
"element": "div",
"element_class": "red-font",
"is_container_style": true
}
]
}
};