Show toolbar only when focused

Konrad Lowczak

Asked On December 18, 2019 12:50 PM UTC

Hi

1. We are wondering if it is possible to add feature to show toolbar only when RichTextEditor control has focus. It is simillar solution to inline mode but not the same.

Then RTE will look like standard input until user clicks inside it.

Example below:

2. Second thing: is it possible to put toolbar at the bottom of RichTextEditor control?

Best regards

Konrad

Reply | Reply with quote

Gunasekar Kuppusamy [Syncfusion]

Replied On December 19, 2019 01:26 PM UTC

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

https://codesandbox.io/s/vue-template-eyg40

Please find code example is given below,

<div>

<ejs-richtexteditor ref="rteObj":toolbarSettings="toolbarSettings" :focus="onFocus" :blur="onBlur">

</ejs-richtexteditor>

</div>

</template>

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 :

https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#toolbarsettings

https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#blur

https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#focus

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

Reply | Reply with quote

jan kowalski

Replied On April 29, 2020 06:45 AM UTC

an error message is currently displayed in the console: 'TypeError

this.contentModule is undefined '

see your codesandbox example. Could you take a closer look at this problem?

Thanks

Reply | Reply with quote

Indrajith Srinivasan [Syncfusion]

Replied On April 30, 2020 12:05 PM UTC

Hi Jan,

Greetings from Syncfusion support,

We have validated on the reported query and have confirmed “Script error occurs while Enable/Disable the Rich Text Editor toolbar dynamically” as a bug from our end and logged the report for the same, and the fix will be included with our patch release on the end of May 2020.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/13972/

Regards,

Indrajith

Reply | Reply with quote

jan kowalski

Replied On May 2, 2020 07:46 AM UTC

OK, thank you very much, Indrajith

Reply | Reply with quote

Indrajith Srinivasan [Syncfusion]

Replied On May 4, 2020 02:53 AM UTC

Hi Jan,

Thanks for the update.

We will let you know once the fix is included, with our Rich Text Editor package.

Regards,

Indrajith

Reply | Reply with quote

Indrajith Srinivasan [Syncfusion]

Replied On June 1, 2020 08:17 AM UTC

Hi Jan,

Thanks for your patience,

We have resolved the issue “Script error occurs while Enable/Disable the Rich Text Editor toolbar dynamically” with Rich Text Editor and the fix is available with the package version 18.1.53. Can you please upgrade your package to this version to resolve the issue from your end.

Sample: https://codesandbox.io/s/vue-template-0xm6l

Release Notes: https://ej2.syncfusion.com/vue/documentation/release-notes/18.1.53/#richtexteditor

Feedback link: https://www.syncfusion.com/feedback/13972/

Regards,

Indrajith

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150037	Dec 18,2019 12:50 PM UTC	Jun 1,2020 08:17 AM UTC	Vue	6

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US