All docs
V21.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
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.

Relocate the Toolbar

The toolbar occupies the top part of the HtmlEditor and is rendered inside the UI component'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.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.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;