@@ -8,7 +8,7 @@ description: You can learn about the toolbar config in the documentation of the
88
99### Description
1010
11- @short : Optional. Enables toolbar and specifies buttons displayed within Toolbar
11+ @short : Optional. Enables toolbar and allows users to specify/configure buttons displayed within toolbar
1212
1313### Usage
1414
@@ -52,7 +52,7 @@ You can specify the following buttons in the RichText toolbar:
5252| ` shortcuts ` | Displays a list of available keyboard shortcuts. |
5353| ` separator ` | Adds a visual separator between toolbar groups. |
5454
55- You can use these strings to configure toolbar buttons as follow :
55+ You can use these strings to configure toolbar buttons as follows :
5656
5757~~~ jsx {2-7}
5858new richtext.Richtext (" #root" , {
@@ -77,8 +77,6 @@ You can specify custom buttons as objects with the following parameters:
7777- ` css ` - (optional) a css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
7878- ` handler ` - (optional) a callback function that executes when the button is clicked
7979
80- You can specify custom buttons within a toolbar as follow:
81-
8280~~~ jsx {6-32}
8381new richtext.Richtext (" #root" , {
8482 toolbar: [
@@ -168,10 +166,24 @@ const defaultToolbarButtons = {
168166~~~
169167
170168::: tip
171- You can import default toolbar controls as follows:
169+ Default toolbar controls are exported by the RichText widget and can be accessed via ` richtext.defaultToolbarButtons ` .
172170
173- ``` jsx
174- richtext .defaultToolbarButtons
171+ ``` jsx{4}
172+ // initialize RichText
173+ new richtext.Richtext("#root", {
174+ toolbar: [
175+ ...richtext.defaultToolbarButtons,
176+ {
177+ type: "button",
178+ id: "btn1", // button id (cannot overlap with existing button ids if you want to apply custom logic)
179+ icon: "wxo-help", // button icon (combines with label)
180+ css: "rounded", // css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
181+ label: "Custom button", // button label (combines with icon)
182+ tooltip: "Some tooltip", // tooltip displayed on hover (if not specified, uses the value from "label")
183+ }
184+ ]
185+ // other configuration properties
186+ });
175187```
176188:::
177189
0 commit comments