Button State Handlers 

A button state handler is a JavaScript function that controls when a button should be displayed as ready, disabled or latched.

The ID name of a button state handler is used as the last parameter of the registerButton method. It specifies which button state handler should control the button.

You can create a new button state handler when constructing the editor with the PHP API using the addJSButtonStateHandler method or from the JavaScript API once the editor is displayed in the browser using the addButtonStateHandler method. 

Button state handler functions are passed a reference to the current JavaScript editor object, the source button element, the button state handler string, a boolean indicating whether the selection is within a table, a boolean indicating whether the selection is within an anchor element and finally a wproRange object containing cross platform properties and methods for accessing the current selection. The button state handler string parameter allows a single function to handle multiple button state handlers.

Example:

Creating a button state handler from the PHP API. 

The following example creates a new button that will insert a cite tag and registers a handler for the new button that will display the button as latched when the selection is within a cite tag.

// create a new button and add it to the toolbar:
$editor->registerButton('cite''Citation''WPro.##name##.applyStyle("cite")''/shout/web/v5.6.4.R20120620/wysiwygPro/3.2.1.20091130/themes/blue/wysiwygpro/buttons/cite.gif'2222'citehandler');
$editor->addRegisteredButton('cite''after:underline');

// register the handler for the new button:
$editor->addJSButtonStateHandler ('citehandler''function (EDITOR,srcElement,cid,inTable,inA,range){
    var c = range.getContainerByTagName("CITE");
    if (c) {
        return "wproLatched";
    } else {
        return "wproReady";
    }
}'
); 

To create the same button state handler from within the JavaScript API:

// register the handler for the new button:
WPro.editors['myEditor'].addButtonStateHandler ('citehandler', function (EDITOR,srcElement,cid,inTable,inA,range){
    var 
range.getContainerByTagName("CITE");
    if (
c) {
        return 
"wproLatched";
    } else {
        return 
"wproReady";
    }
});