Angular HtmlEditor - toolbar
Configures the widget's toolbar.
container
Specifies the container in which to place the toolbar.
When this option is not set, the toolbar is placed in the widget's container.
See Also
items
Configures toolbar controls. These controls allow users to format text and execute commands.
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:
jQuery
$(function(){ $("#htmlEditorContainer").dxHtmlEditor({ toolbar: { items: [ "bold", "italic", "alignCenter", "undo", "redo" ] } }) })
Angular
<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 ], // ... })
ASP.NET MVC Controls
@(Html.DevExtreme().HtmlEditor() .Toolbar(t => t .Items(i => { i.Add().FormatName("bold"); i.Add().FormatName("italic"); i.Add().FormatName("alignCenter"); i.Add().FormatName("undo"); i.Add().FormatName("redo"); }) ) )
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:
jQuery
$(function(){ $("#htmlEditorContainer").dxHtmlEditor({ toolbar: { items: [ // ... { formatName: "clear", options: { icon: "clear", type: "danger" } }] } }) })
Angular
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>
ASP.NET MVC Controls
@(Html.DevExtreme().HtmlEditor() .Toolbar(t => t .Items(i => { i.Add().FormatName("clear") .Widget(w => w.Button() .Icon("clear") .Type(ButtonType.Danger) ); }) ) )
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.