Vue HtmlEditor - Relocate the Toolbar

The toolbar occupies the top part of the HTML Editor 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 HTML Editor:

  • <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>