DevExtreme Angular - Built-In Controls
Controls on the toolbar manage the content. Built-in controls include buttons and select boxes.
Buttons apply single-choice formats to the text or perform actions on it. Select boxes apply multiple-choice formats.
To add a button to the toolbar, add its name to the items array:
- <dx-html-editor>
- <dxo-toolbar [items]="[ 'bold', 'italic', 'alignRight', 'alignLeft' ]"></dxo-toolbar>
- </dx-html-editor>
- import { DxHtmlEditorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxHtmlEditorModule
- ],
- // ...
- })
To add a select box, specify the formatName and formatValues:
- import { DxHtmlEditorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- items = [{
- formatName: "header",
- formatValues: [1, 2, 3, false]
- }, {
- formatName: "align",
- formatValues: ["left", "right", "center"]
- }]
- }
- @NgModule({
- imports: [
- // ...
- DxHtmlEditorModule
- ],
- // ...
- })
- <dx-html-editor>
- <dxo-toolbar [items]="items"></dxo-toolbar>
- </dx-html-editor>
Customize Built-In Controls
To customize a button, assign its name to the formatName option and specify 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 customize a select box, specify select box options in the options object in addition to the formatName and formatValues options:
- import { DxHtmlEditorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- items: any = [{
- formatName: "size",
- formatValues: ["11px", "14px", "16px"],
- options: {
- width: 150
- }
- }, // ...
- ];
- }
- @NgModule({
- imports: [
- // ...
- DxHtmlEditorModule
- ],
- // ...
- })
- <dx-html-editor>
- <dxo-toolbar [items]="items"></dxo-toolbar>
- </dx-html-editor>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.