Angular HtmlEditor - toolbar
items[]
The toolbar provides predefined items and supports custom items. To add a predefined item to the toolbar, include it in the items array:
- <dx-html-editor>
- <dxo-toolbar [items]="[ 'bold', 'italic', 'alignCenter', 'undo', 'redo' ]"></dxo-toolbar>
- </dx-html-editor>
- import { DxHtmlEditorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxHtmlEditorModule
- ],
- // ...
- })
Most of the predefined items are buttons. To customize a button, assign its name to the formatName option and specify the button options in the options object:
- import { DxHtmlEditorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- items: any = [ // ...
- {
- formatName: "clear",
- options: { icon: "clear", type: "danger" }
- }];
- }
- @NgModule({
- imports: [
- // ...
- DxHtmlEditorModule
- ],
- // ...
- })
- <dx-html-editor>
- <dxo-toolbar [items]="items"></dxo-toolbar>
- </dx-html-editor>
To use another widget instead of a button, specify the widget option and configure the widget in the options object. In this case, you should also implement all the logic.
The toolbar provides a short syntax for implementing a custom drop-down menu with multiple choices. Refer to the formatName description for more information.
If you have technical questions, please create a support ticket in the DevExpress Support Center.