How to enable / disable user button when changing selection using tinymce

Question

I use this code to create a custom tinymce button that changes the class of an image. It is located in the tuner.

ed.addButton('cust_setimgaspreview', { title : 'Set image as a preview image', image : 'ikony/previews.png', onclick : function() { if(ed.selection.getNode().tagName == 'IMG') { ed.selection.getNode().className = 'preview'; } else { alert('You need to select an image.'); } } }); 

As you can see, I use the "ugly approach" to disable class change for elements other than the image. How can I disable / enable a button in the same way as tinymce using the default buttons (for example, edit an image or edit a link)? I think I need to somehow catch the change in the selection, and then change the state of the button depending on the choice, but I have no ideal how to do this.

Answer 1

Just figured it out - it's pretty simple. I just edited my setup function and added an onNodeChange handler.

 setup : function(ed) { ed.onNodeChange.add(function(ed, cm, node) { cm.setDisabled('cust_setimgaspreview', !(node.tagName == 'IMG')) }); ed.addButton('cust_setimgaspreview', { title : 'Set image as a preview image', image : 'ikony/previews.png', onclick : function() { ed.selection.getNode().className = 'preview'; } }); } 

Answer 2

You can use the functions provided by the control manager.

You can use ie

  state = !state; ed.controlManager.setActive('my_button_id', state);