Adding Your Custom Styles to the Question Editor Toolbar

How to add customized styles to QE's editors.

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.

If you specify an inline element like span 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"
            }
        ]
    }
};
If you specify a block element like div 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"
            }
         ]
     }
};
               

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
            }
         ]
     }
};
               
Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.