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.

DevExtreme HTML5 JavaScript HtmlEditor Toolbar

To add a button to the toolbar, add its name to the items array:

HTML
TypeScript
  • <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:

TypeScript
HTML
  • 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:

TypeScript
HTML
  • 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:

TypeScript
HTML
  • 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