Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Toggle the State of a CKEditor plugin button

What is the correct way to toggle the state of a ckeditor plugin menu button based on the selection?

For example, in a link/unlink plugin, I would only want to enable unlink if the cursor is in a link.

editor.addCommand("unlink", {
    exec: function (editor) {
         //do something here
    },
    refresh: function (editor, path) {
       // never seems to get fired. Is this even the right hook?
    }
});

editor.ui.addButton("Unlink", {
    label: "Unlink",
    command: "unlink"
});

Thanks for the help!

like image 358
benkiefer Avatar asked May 08 '15 17:05

benkiefer


1 Answers

There is CKEDITOR.commandDefinition#contextSensitive property that makes it possible to control the state of a command in a particular context.

For example, the actual implementation of Unlink button looks like:

CKEDITOR.unlinkCommand.prototype = {
    exec: function( editor ) {
        ...
    },

    refresh: function( editor, path ) {     
        var element = path.lastElement && path.lastElement.getAscendant( 'a', true );

        if ( element && element.getName() == 'a' && element.getAttribute( 'href' ) && element.getChildCount() )
            this.setState( CKEDITOR.TRISTATE_OFF );
        else
            this.setState( CKEDITOR.TRISTATE_DISABLED );
    },

    contextSensitive: 1,
    ...
};
like image 55
oleq Avatar answered Nov 12 '22 12:11

oleq