Angular HtmlEditor - Relocate the Toolbar

The toolbar occupies the top part of the HTML Editor and is rendered inside the UI component's container. To relocate the toolbar, specify a different container for the toolbar.

In the following code, the toolbar is placed in a separate <div> under the HTML Editor:

HTML
TypeScript
  • <dx-html-editor>
  • <dxo-toolbar ...
  • container="#htmlEditorFooter">
  • </dxo-toolbar>
  • </dx-html-editor>
  • <div id="htmlEditorFooter"></div>
  • import { DxHtmlEditorModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxHtmlEditorModule
  • ],
  • // ...
  • })