All docs
V23.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 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.

jQuery HtmlEditor - 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;