All docs
V20.2
20.2
20.1
19.2
19.1
18.2
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

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
    ],
    // ...
})
Vue
<template>
    <div>
        <DxHtmlEditor>
            <DxToolbar ...
                container="#htmlEditorFooter"/>
        </DxHtmlEditor>
        <div id="htmlEditorFooter"></div>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import {
    DxHtmlEditor,
    DxToolbar
} from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor,
        DxToolbar
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { HtmlEditor, Toolbar } from 'devextreme-react/html-editor';

class App extends React.Component {
    render() {
        return (
            <div>
                <HtmlEditor>
                    <Toolbar ...
                        container="#htmlEditorFooter"/>
                </HtmlEditor>
                <div id="htmlEditorFooter"></div>
            </div>
        );
    }
}

export default App;