Get the state of the clicked toolbar button in CKEitor

Question

I am attempting to disable a button that exists on my JSP page, outside of the CKEditor dialog. Specifically, when the "Source" button on the CKEditor toolbar is clicked I would like to run some code that simply disables a "Publish" button on my web page - don't allow publish to occur if the HTML source code is available for editing. I have tried Event Delegation that was suggested in this SO posting. This would work except that with the CKEditor Source button, the class changes from "cke_button_off" to "cke_button_disabled" to "cke_button_on" as it completes its work. The code presented Manwal in the referenced SO posting queries the hassclass for a specific class to determine if the button is enabled or not. Nice clean solution except, as I stated, there is this intermediate "cke_button_disabled" class that engages once the button is clicked, so that check always fails in my code because I do not check for a "cke_button_disabled" class. I only care about two css classes that are set: cke_button_on and cke_button_off.

So that is my dilemma. I have thought about waiting for the click event to complete before querying the css class that been set, but I cannot find a way to do this so that I can query the css class of the Source button once the CKEditor Source button click is complete. I have tried CKEditor's afterCommandExec but that did not work. Here is that code:

CKEDITOR.on('instanceReady', function (e) {
  var editor = e.editor;
  editor.on('afterCommandExec', handleAfterCommandExec);

function handleAfterCommandExec(event) {
    var commandName = event.data.name;
// For 'source' commmand:
    if (commandName == 'source') {
        var xxx = $(document.getElementById('cke_15'));
        if(xxx.hasClass('cke_button_off')) { //cke_button_off when 
                                             //     notdepressed 
            console.log("In handleAfterCommandExec::  
                                CKEDITOR SOURCE BUTTON CLICKED!!!!");
            $('#button-publishButton').attr("disabled", "true");
        }else {
            console.log("In handleAfterCommandExec:: 
                  CKEDITOR SOURCE BUTTON UNNNNACLICKED!!!!");
            $("#button-publishButton").removeAttr("disabled");
        }
    }
}

I have also tried a callback:

$(document).on('click', '.cke_button__source', function(){
   test();
});

function test() {
var xxx = $(document.getElementById('cke_15'));
if(xxx.hasClass('cke_button_off')) { //cke_button_off when not depressed 
                                     //cke_button_disabled
.....same code as previous

}

See what I mean? Each time my code runs the result of the hassclass query is always "cke_disabled". Can anybody suggest a way to query the state of that CKEditor "Source" button css value to give me what I am looking for - button_on or button_off? Perhaps there's another way of waiting until the Source button code is complete before checking the css value, or, perhaps there's another way of disabling a button on a JSP page when a CKEditor toolbar button is clicked? Thank you for your time and assistance.

Answer 1

In order to get the state of the clicked button in CKEitor's toolbar you would need to check event.data.name and event.data.command.previousState properties on the object event data for afterCommandExec event.

Using your example in the question, the working code for you would be:

CKEDITOR.on('instanceReady', function (e1) {
  e1.editor.on('afterCommandExec', function(e2) {
     if (e2.data.name === 'source' && e2.data.command.previousState === 1) {
        console.log('The source button has been unclicked!');
      }
  });
});

Eventually, if you wanted to do this to restore previously used styling, like a class name on the body tag, which is lost after transition, just find the instance's frame and add the class manually.

setTimeout(function(){
   $(e1.editor.document.$).find('body').addClass('nightRider');
}, 100);

You will need a delay in order to do it, 100ms is always enough.