JavaScript/jQuery HtmlEditor - Relocate an Item

Toolbar items are aligned to the left (right if rtlEnabled is true) and preserve the order they have in the items array. Use the location property to override the order.

This property accepts the "before", "center", and "after" values that specify a toolbar item's location relative to that of other items. In the code below, it is used to order items as follows: alignLeft, alignRight, color, background, undo, and redo. Note that alignLeft and alignRight assume the default value, "before".

HTML
TypeScript
  • <dx-html-editor>
  • <dxo-toolbar>
  • <dxi-item formatName="undo" location="after"></dxi-item>
  • <dxi-item formatName="redo" location="after"></dxi-item>
  • <dxi-item formatName="alignLeft"></dxi-item>
  • <dxi-item formatName="alignRight"></dxi-item>
  • <dxi-item formatName="color" location="center"></dxi-item>
  • <dxi-item formatName="background" location="center"></dxi-item>
  • </dxo-toolbar>
  • </dx-html-editor>
  • import { DxHtmlEditorModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxHtmlEditorModule
  • ],
  • // ...
  • })

If the toolbar cannot fit all the items, some of them are collected in the overflow menu. Use the locateInMenu property to change this behavior:

HTML
TypeScript
  • <dx-html-editor>
  • <dxo-toolbar>
  • <!-- ... -->
  • <dxi-item formatName="undo" locateInMenu="always"></dxi-item>
  • <dxi-item formatName="color" locateInMenu="never"></dxi-item>
  • </dxo-toolbar>
  • </dx-html-editor>
  • import { DxHtmlEditorModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxHtmlEditorModule
  • ],
  • // ...
  • })