Depending on the cursor location and/or the current selection in the editor window, some of the toolbar buttons may be enabled/disabled. For example, the unlink button will only be enabled when the cursor is positioned on a link element. If you move the cursor away from the link element, the unlink button becomes disabled.
So each time some action occurs in the editor window, a toolbar button event must be triggered that sets the state of the toolbar button. Does somebody know how this is implemented ? Is there some kind of "setState" event in the button definition which is called from the editor window ?
So each time some action occurs in the editor window, a toolbar button event must be triggered that sets the state of the toolbar button. Does somebody know how this is implemented ? Is there some kind of "setState" event in the button definition which is called from the editor window ?
Re: Enable/disable toolbar buttons on the fly
Don't know if the state of the toolbar dropdowns can be controlled.
// Register selection change handler for the unlink button.
editor.on( 'selectionChange', function( evt )
{
if ( editor.readOnly )
return;
var command = editor.getCommand( 'unlink' ),
element = evt.data.path.lastElement && evt.data.path.lastElement.getAscendant( 'a', true );
if ( element && element.getName() == 'a' && element.getAttribute( 'href' ) && element.getChildCount() )
command.setState( CKEDITOR.TRISTATE_OFF );
else
command.setState( CKEDITOR.TRISTATE_DISABLED );
} );
In command.js:-
setState : function( newState )
{
// Do nothing if there is no state change.
if ( this.state == newState )
return false;
this.previousState = this.state;
// Set the new state.
this.state = newState;
// Fire the "state" event, so other parts of the code can react to the
// change.
this.fire( 'state' );
return true;
}