Angular HtmlEditor - toolbar

Configures the widget's toolbar.

Default Value: null

DevExtreme HTML5 JavaScript HtmlEditor Toolbar

See Also

container

Specifies the container in which to place the toolbar.

Type:

String

|

Element

|

jQuery

When this option is not set, the toolbar is placed in the widget's container.

See Also

items[]

Configures toolbar items. These items allow users to format text and execute commands.

Type:

Array<Object | String>

Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'image' | 'size' | 'strike' | 'subscript' | 'superscript' | 'underline' | 'blockquote' | 'header' | 'increaseIndent' | 'decreaseIndent' | 'orderedList' | 'bulletList' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'codeBlock' | 'variable' | 'separator' | 'undo' | 'redo' | 'clear'

The toolbar provides predefined items and supports custom items. To add a predefined item to the toolbar, include it in the items array:

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

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 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.

View Demo