Hi Konrad,
Greetings from Syncfusion support.
We have validated you reported queries. We can achieve it in application end by rendering the RichTextEditor component without toolbar on initially, enable the toolbar on component focus event and disable the toolbar on component blur event. We need to config the toolbarSettings.enable the property to enable or disable the toolbar.
To show the toolbar at bottom, we need to add the below styles.
.e-rte-toolbar.e-control.e-toolbar {
position: absolute;
bottom: 0px;
border-top: inherit;
border-bottom: inset;
}
For your reference, we have created a sample, please get it from the below link
Please find code example is given below,
|
<template>
<div>
<ejs-richtexteditor ref="rteObj":toolbarSettings="toolbarSettings" :focus="onFocus" :blur="onBlur">
</ejs-richtexteditor>
</div>
</template>
<script>
import Vue from "vue";
import { RichTextEditorPlugin, Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, Table } from "@syncfusion/ej2-vue-richtexteditor";
Vue.use(RichTextEditorPlugin);
export default Vue.extend({
data: function() {
return {
toolbarSettings: {
enable: false,
enableFloating: false,
type: "MultiRow"
}
};
},
methods: {
onBlur: function(e) {
this.$refs.rteObj.ej2Instances.toolbarSettings.enable = false;
},
onFocus: function(e) {
this.$refs.rteObj.ej2Instances.toolbarSettings.enable = true;
}
},
provide: {
richtexteditor: [ Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, Table ]
}
});
</script>
|
API :
If the above shared solution doesn’t meet your requirement, kindly share us more details regarding your requirement to provide an appropriate solution at the earliest.
Regards,
Gunasekar
