How to disable custom toolbar item in rich text editor

Hi,

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:
textEditor.disableToolbarItem();

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?

Thanks.

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. 
 
Regards, 
Gurunathan  


Loader.
Up arrow icon