JavaScript/jQuery 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:
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;Feedback