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. Image for the cookie policy date

Show toolbar only when focused

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

6 Replies

GK Gunasekar Kuppusamy Syncfusion Team 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 
 



JK jan kowalski 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


IS Indrajith Srinivasan Syncfusion Team 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 



JK jan kowalski May 2, 2020 07:46 AM UTC

OK, thank you very much, Indrajith


IS Indrajith Srinivasan Syncfusion Team 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 



IS Indrajith Srinivasan Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon