We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Show toolbar only when focused

Thread ID:

Created:

Updated:

Platform:

Replies:

150037 Dec 18,2019 12:50 PM UTC Jun 1,2020 08:17 AM UTC Vue 6
loading
Tags: RichTextEditor
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

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  
 
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 { RichTextEditorPluginToolbarLinkImageCountHtmlEditorQuickToolbarTable } 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: [ ToolbarLinkImageCountHtmlEditorQuickToolbarTable ] 
  } 
}); 
</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 
 


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

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 


jan kowalski
Replied On May 2, 2020 07:46 AM UTC

OK, thank you very much, Indrajith

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 


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.
 
 
 
Indrajith 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon