Angular HtmlEditor - toolbar
items[]
The toolbar provides built-in controls and supports custom controls. To add a built-in control 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
- ],
- // ...
- })
The following built-in controls are available:
Formatting Controls | Action and Other Controls | |
|
|
|
These controls 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 also provides short syntax for implementing a custom drop-down control 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.