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.