DevExtreme React - 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 ], // ... })
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.