React 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:

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