我可以自定义ckeditor插件对话框的OK和Cancel按钮的标签

Question

我已经在CK编辑器JS框架中创建了插件。我能够显示一个包含少量字段的插件的对话框。但我需要控制OK和Cancel按钮css属性，如标签，颜色等。这种定制可能吗？

Answer 1

有覆盖方法覆盖传入的参数。它适用于Ckeditor 4.尝试一下：

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
        }
    };
});

Answer 2

这里有两种方法：

• 您可以使用CKEDITOR.dialog.definition#buttons属性自定义按钮。
• 您可以覆盖CKEDITOR.dialog.okButton方法 - 更多hacky，因此我建议您尝试使用第一个方法。

Answer 3

我进行了很多搜索，但没有一个漂亮的解决方案对我有用。这就是为什么我使用难看但有效的解决方案的原因。

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);

                    });

您甚至不会注意到文本何时更改。如果有更好的选择，请分享。