Can I Customize The Label Of Ok And Cancel Buttons Of Ckeditor Plugin Dialog

I have plugin created into the CK editor JS framework. I was able to show a dialog for my plugin with few fields. But I need to control the OK and Cancel buttons css properties lik

Solution 1:

There is override method which overrides passed in parameters. It works for me on Ckeditor 4. Try it:

CKEDITOR.dialog.add( 'getlinkDialog', function ( editor ) {
    return {
        title: 'Dialog title',
        minWidth: 300,
        minHeight: 70,
        contents: [
            {
                id: 'getlink-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'link',
                        label: 'Enter your name'
                    }
                ]
            }
        ],
        buttons: [
        CKEDITOR.dialog.okButton.override( { label : 'My Label'} ),
        CKEDITOR.dialog.cancelButton.override( {} )
        ],
        onOk: function() {
           //Your code
        }
    };
});

Solution 2:

You have two approaches here:

• You can customize buttons uing CKEDITOR.dialog.definition#buttons property.
• You could override CKEDITOR.dialog.okButton method - more hacky, thus I'd recommend you trying with the first one.

Solution 3:

I searched a lot and none of the pretty solutions worked for me. That's why i used the uglier but working solution.

CKEDITOR.on( 'dialogDefinition', function( ev ) {
                        // Take the dialog window name and its definition from the event data.var dialogName = ev.data.name;
                        var dialogDefinition = ev.data.definition;
                        console.log("dialogDefinition", dialogDefinition);
                        console.log("dialogName", dialogName);
                        setTimeout(function () {
                            console.log("$('.cke_dialog_ui_button_ok').length", $('.cke_dialog_ui_button_ok').length);
                            $('span', '.cke_dialog_ui_button_ok').html("Save");
                        }, 100);

                    });

You will not even notice when was the text changed. If there is any better alternatives, please share.