DevExtreme jQuery - Relocate the Toolbar
The toolbar occupies the top part of the HtmlEditor and is rendered inside the widget'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 HtmlEditor:
jQuery
JavaScript
HTML
$(function(){ $("#htmlEditorContainer").dxHtmlEditor({ toolbar: { // ... container: "#htmlEditorFooter" } }) })
<div id="htmlEditorContainer"></div> <div id="htmlEditorFooter"></div>
Angular
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 ], // ... })
Feedback