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
close icon

How to disable custom toolbar item in rich text editor


I've added a couple of custom toolbar items in my rich text editor instance, added to the toolbar items like so:
toolbarSettings: {
    type: 'Expand',
    items: [
        tooltipText: 'Custom Item',
        template: '',

And then attempting to disable the item using:

The above method works correctly for built-in toolbar items (eg. textEditor.disableToolbarItem('Copy');) however I cannot determine what the correct reference to the toolbar item is. 
Could I get a sample of enabling/disabling a custom toolbar item in the Vue rich text editor?


1 Reply

GA Gurunathan A Syncfusion Team October 24, 2019 12:53 PM UTC

Hi Matt, 
Thanks for contacting us.  
We can disable / enable the toolbar item using it’s index along with it state (enable(true)  disable (false)). Please find the code snippet for this scenario. 
    enable: function() { 
      this.$refs.rteInstance.ej2Instances.toolbarModule.baseToolbar.toolbarObj.enableItems(13, true); 
    disable: function() { 
      this.$refs.rteInstance.ej2Instances.toolbarModule.baseToolbar.toolbarObj.enableItems(13, false); 
Please find the demo sample from here.  
Please let us know if any concerns. 

Live Chat Icon For mobile
Up arrow icon