All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

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