React HtmlEditor - toolbar
items[]
The toolbar provides predefined items and supports custom items. To add a predefined item 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"); }) ) )
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:
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 provides a short syntax for implementing a custom drop-down menu 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.