Get the state of the clicked toolbar button in CKEitor

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.

Solution

You shouldn't be hacking the CKEditor with JQuery like this. What is the problem exactly? Is it trapping the event or figuring out if it is on or off? If you're having trouble detecting if source mode is on or off, you should be able to get that via the editor mode attribute:

http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-mode