Toolbar Controls

Besides using the default controls of the toolbar, you can customize the toolbar by adding the following controls:

Button

A simple button that can have an icon

PropertiesTypeDescription
typestringthe type of a button, set it to "button"
idstringthe id of a button, auto-generated if not set
iconstringthe name of an icon from the used icon font
hotkeystringthe name of the hot key for a button
valuestringthe value of a button
tooltipstringthe tooltip of a button
countnumberthe counter of a button
countColorstringthe color of a badge with number: "danger","secondary","primary","success"
itemsarrayan array of nested controls. You can find the full list of all available controls here. If the type of a nested control is not specified, the menuItem type will be applied by default.
groupstringdefines the name of a group of controls a button belongs to. If one of the buttons in the group becomes active, all others automatically become inactive.
multiClickbooleandefines the behavior of the Undo/Redo buttons:
  • true - all the actions are reverted/re-applied one by one when the Undo/Redo button is clicked and held
  • false - one action is reverted/re-applied on each click of the Undo/Redo button
  • viewstringdefines the look of a button: "flat","link"
    colorstringdefines the color scheme of a button: "danger","secondary","primary","success"
    sizestringdefines the size of a button: "small","medium"
    circlebooleanmakes the corners of a button round
    loadingbooleanadds a spinner into a button
    hiddenbooleandefines whether a button is hidden
    disabledbooleandefines whether a button is disabled
    richtext.toolbar.data.add({
    type: "button",
    id: "button-id",
    value: "Some value",
    icon: "icon-name"
    }, 2);

    Custom HTML

    An item that contains any custom HTML content (for example, an image, icon or other element)

    PropertiesTypeDescription
    typestringthe item type, set it to "customHTML"
    idstringthe id of a an item, auto-generated if not set
    htmlstringa string with HTML that should be inserted into the item
    cssstring,string[]adds style classes
    hiddenbooleandefines whether an item is hidden
    richtext.toolbar.data.add({
    type: "customHTML",
    id: "htmlbutton-id",
    value: "Some value",
    icon: "icon-name"
    }, 2);

    ImageButton

    A button with an image

    PropertiesTypeDescription
    typestringthe type of an item, set it to "imageButton"
    idstringthe id of a control, auto-generated if not set
    srcstringthe path to the image
    cssstring,string[]adds style classes to a button
    hotkeystringthe name of the hot key for the button
    tooltipstringa tooltip for the button
    countnumbera badge with a number
    countColorstringthe color of a badge with number: "danger","secondary","primary","success"
    hiddenbooleandefines whether a button is hidden
    disabledbooleandefines whether a button is disabled
    richtext.toolbar.data.add({
    type: "imageButton",
    count: 10,
    src: "../img/avatar.png"
    }, 3);

    SelectButton

    A button that contains a drop-down list of options

    PropertiesTypeDescription
    typestringthe type of an item, set it to "selectButton"
    idstringthe id of a control, auto-generated if not set
    valuestringa value of the button
    cssstring,string[]adds style classes to a button
    iconstringthe name of an icon from the used icon font
    itemsarrayan array of nested controls. You can find the full list of all available controls here. If the type of a nested control is not specified, the menuItem type will be applied by default.
    tooltipstringa tooltip for the control
    countnumbera badge with a number
    countColorstringthe color of a badge with number: "danger","secondary","primary","success"
    hiddenbooleandefines whether a button is hidden
    disabledbooleandefines whether a button is disabled
    richtext.toolbar.data.add({
    id: "select_button",
    type: "selectButton",
    value: "1",
    items: [
    {
    value: "1",
    hotkey: "alt+1"
    },
    {
    value: "2",
    hotkey: "alt+2"
    },
    {
    value: "3",
    hotkey: "alt+3"
    }
    ]
    }, 3);

    Separator

    A horizontal (between menu options) or vertical (between toolbar controls) line separating items/groups of items from each other

    PropertiesTypeDescription
    typestringthe type of an item, set it to "separator"
    idstringthe id of a control, auto-generated if not set
    richtext.toolbar.data.add({
    type:"separator"
    }, 4);

    Spacer

    The item takes space on the toolbar and is used for aligning controls

    PropertiesTypeDescription
    typestringthe type of an item, set it to "spacer"
    idstringthe id of a control, auto-generated if not set
    richtext.toolbar.data.add({
    type:"spacer"
    }, 4);