React HtmlEditor - toolbar
container
When this property is not set, the toolbar is placed in the UI component's container.
See Also
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> <dxi-item formatName="bold"></dxi-item> <dxi-item formatName="italic"></dxi-item> <dxi-item formatName="alignCenter"></dxi-item> <dxi-item formatName="undo"></dxi-item> <dxi-item formatName="redo"></dxi-item> </dxo-toolbar> </dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxHtmlEditorModule ], // ... })
Vue
<template> <DxHtmlEditor ... > <DxToolbar> <DxItem format-name="bold" /> <DxItem format-name="italic" /> <DxItem format-name="alignCenter" /> <DxItem format-name="undo" /> <DxItem format-name="redo" /> </DxToolbar> </DxHtmlEditor> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxHtmlEditor, { DxToolbar, DxItem } from 'devextreme-vue/html-editor'; export default { components: { DxHtmlEditor, DxToolbar, DxItem }, // ... } </script>
React
import 'devextreme/dist/css/dx.light.css'; import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor'; export default function App() { return ( <HtmlEditor> <Toolbar> <Item formatName="bold" /> <Item formatName="italic" /> <Item formatName="alignCenter" /> <Item formatName="undo" /> <Item formatName="redo" /> </Toolbar> </HtmlEditor> ); }
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 property and specify the button options in the options object:
jQuery
$(function(){ $("#htmlEditorContainer").dxHtmlEditor({ toolbar: { items: [ // ... { formatName: "clear", options: { icon: "clear", type: "danger" } }] } }) })
Angular
<dx-html-editor> <dxo-toolbar [items]="items"> <!-- ... --> <dxi-item formatName="clear" [options]="clearFormatOptions"> </dxi-item> </dxo-toolbar> </dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular"; // ... export class AppComponent { clearFormatOptions = { icon: "clear", type: "danger" }; } @NgModule({ imports: [ // ... DxHtmlEditorModule ], // ... })
Vue
<template> <DxHtmlEditor ... > <DxToolbar> <!-- ... --> <DxItem format-name="clear" :options="clearFormatOptions" /> </DxToolbar> </DxHtmlEditor> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxHtmlEditor, { DxToolbar, DxItem } from 'devextreme-vue/html-editor'; export default { components: { DxHtmlEditor, DxToolbar, DxItem }, data() { return { clearFormatOptions: { icon: "clear", type: "danger" } }; } } </script>
React
import 'devextreme/dist/css/dx.light.css'; import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor'; const clearFormatOptions = { icon: "clear", type: "danger" }; export default function App() { return ( <HtmlEditor> <Toolbar> </* ... */} <Item formatName="clear" options={clearFormatOptions} /> </Toolbar> </HtmlEditor> ); }
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 UI component instead of a button, specify the widget property and configure the UI component 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.
multiline
Specifies whether or not items are arranged into multiple lines when their combined width exceeds the toolbar width.
If you have technical questions, please create a support ticket in the DevExpress Support Center.