CODEWITHSUNDEEP
javascriptckeditor
benkiefer
benkiefer

Reputation: 739

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!

Upvotes: 7

Views: 1497

Answers (1)

oleq
oleq

Reputation: 15895

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,
    ...
};

Upvotes: 3

Related Questions