Angular 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;
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.