Skip to main content

toolbar

Description

Optional. Enables toolbar and allows users to specify/configure buttons displayed within toolbar

Usage

toolbar?: boolean | Array<string | { id: string, type: string, label?: string, tooltip?: string, css?: string, handler?: () => any }>;

Available buttons within Toolbar

You can specify the following buttons in the RichText toolbar:

ButtonDescription
undoReverts the most recent user action.
redoReapplies the previously undone action.
styleAllows selection of text styles (e.g., headings, paragraph, etc.).
font-familyChanges the font of the selected text.
font-sizeAdjusts the size of the selected text.
boldApplies bold formatting to the selected text.
italicApplies italic formatting to the selected text.
underlineUnderlines the selected text.
strikeApplies strikethrough formatting.
subscriptFormats the text as subscript.
superscriptFormats the text as superscript.
text-colorChanges the text color.
background-colorChanges the background (highlight) color of the text.
alignSets text alignment (left, center, right, justified).
indentIncreases text block indentation.
outdentDecreases paragraph indentation.
line-heightAdjusts the line spacing (line height).
quoteFormats the text as a blockquote.
bulleted-listCreates a bulleted list.
numbered-listCreates a numbered list.
linkInserts a hyperlink.
imageInserts an image.
lineInserts a horizontal line.
clearRemoves all formatting from the selected text.
printOpens the print dialog.
fullscreenToggles fullscreen mode.
modeswitches between layout modes (classic/document)
shortcutsDisplays a list of available keyboard shortcuts.
separatorAdds a visual separator between toolbar groups.

You can use these strings to configure toolbar buttons as follows:

new richtext.Richtext("#root", {
toolbar: [
"bold",
"italic",
"separator",
// other buttons
],
// other configuration properties
});

Custom buttons within Toolbar

You can specify custom buttons as objects with the following parameters:

  • type - (required) specifies a custom control type. The following types are available: "button", "richselect", "colorpicker"
  • id - (optional) a custom control ID (cannot overlap with existing control ID)
  • label - (optional) a button label (combines with icon)
  • tooltip - (optional) a tooltip displayed on hover (if not specified, uses the value from "label")
  • css - (optional) a css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
  • handler - (optional) a callback function that executes when the button is clicked
new richtext.Richtext("#root", {
toolbar: [
// buttons (strings represent buttons only)
"bold",
"italic",
// predefined buttons (user cannot define any other options for these (no labels, tooltips, options, etc.), so only ({ type: "button", id: string })
{
type: "button",
id: "fullscreen",
},
// user must specify the correct type if they want to use a predefined control (e.g. richselect/colorpicker)
// non-matching types will be ignored (not added to the toolbar)
{
type: "richselect", // type: "button" - incorrect, will be ignored
id: "mode",
},
// custom buttons (supported options are below)
// user can only define custom buttons (no richselect/colorpicker support atm)
{
type: "button",
id: "some",
label: "Some",
handler: () => {/* custom logic */}
},
{
type: "button",
id: "other",
icon: "wxo-help",
label: "Other",
tooltip: "Some tooltip",
handler: () => {/* custom logic */}
}
],
// other configuration properties
});

Hide Toolbar

If you need to hide toolbar, set the toolbar property to false as follows:

new richtext.Richtext("#root", {
toolbar: false
// other configuration properties
});

Default config

const defaultToolbarButtons = {
"undo",
"redo",
"separator",
"style",
"separator",
"font-family",
"font-size",
"separator",
"bold",
"italic",
"underline",
"strike",
"separator",
"text-color",
"background-color",
"separator",
"align",
"line-height",
"outdent",
"indent",
"separator",
"bulleted-list",
"numbered-list",
"quote",
"separator",
"link",
"image",
"separator",
"clear",
"separator",
"fullscreen",
"mode"
};
tip

Default toolbar controls are exported by the RichText widget and can be accessed via richtext.defaultToolbarButtons.

// initialize RichText
new richtext.Richtext("#root", {
toolbar: [
...richtext.defaultToolbarButtons,
{
type: "button",
id: "btn1", // button id (cannot overlap with existing button ids if you want to apply custom logic)
icon: "wxo-help", // button icon (combines with label)
css: "rounded", // css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
label: "Custom button", // button label (combines with icon)
tooltip: "Some tooltip", // tooltip displayed on hover (if not specified, uses the value from "label")
}
]
// other configuration properties
});

Example

// initialize RichText
new richtext.Richtext("#root", {
toolbar: [
"bold",
"italic",
"separator",
// custom buttons (all supported options are used below)
// user can only define custom buttons (no richselect/colorpicker support at the moment)
{
type: "button",
id: "btn1", // button id (cannot overlap with existing button ids if you want to apply custom logic)
icon: "wxo-help", // button icon (combines with label)
css: "rounded", // css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
label: "Custom button", // button label (combines with icon)
tooltip: "Some tooltip", // tooltip displayed on hover (if not specified, uses the value from "label")
handler: () => ..., // custom logic attached to this button
}
]
// other configuration properties
});

Change log: The property was added in v2.0

Related articles: Configuration

Related sample: RichText. Custom control and simplified toolbar