Author API Initialization

Allows you to add custom buttons to the rich text editor toolbar used in the Widget (Questions or Features) editor view.

You would want to use this to add a custom button allowing authors to embed a video into the rich text editor content, for example.

When the button is clicked by an author, the "func" function is called. This function contains your custom logic for the button.

Examples

var callbacks = {
    "customButtons": [
        {
            "name": "embedvideo",
            "label": "Embed Video",
            "icon": "https://url.for.your.image",
            "func": function (attribute, callback) {
                // Function that opens a form which enables embedding of custom
                // content into the editor and then calls callback(HTML)
            },
            "attributes": []
        },
        ...
    ]
};

Values

Attribute path customButtons

Type array

Properties

• name string

  A unique identifier for the button.

• icon string

  A URL to the button's icon (recommended dimensions: 25px by 25px).

• label string

  The text that appears on the button in the toolbar.

• func function

  The callback function which is executed when the custom button is clicked.

  • attribute string

    The element path of the rich text editor field where the custom button was clicked.

    For example, if the custom button was clicked in the stimulus field, this value will be "stimulus". If the custom button was clicked in the first option field of a multiple choice question, the value will be options[0].label.

  • callback function

    Call this function to add the custom content to the text editor.

    • customContent string

      The custom HTML content to be added to the text editor.

• attributes array

  A string array containing the path selectors of the rich text editors with which the custom buttons are to be associated with. If this is undefined (or empty), the buttons will be associated with all rich text editor instances.

  For array type fields like options, you can either define a selector for a specific entry, for example options[0], or you can specify a selector targeting the whole array, for example options[*]. For more on rich text editor selectors see the editor layout components section.