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
    ],
    // ...
})