How to disable custom toolbar item in rich text editor

[Eddy Moulton]

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.

[Gurunathan A]

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.  

Sample: https://codesandbox.io/s/vue-template-jpmzn 

 

Please let us know if any concerns. 

 

Regards, 

Gurunathan