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

【问题标题】：Can I customize the label of OK and Cancel buttons of ckeditor plugin dialog我可以自定义ckeditor插件对话框的OK和Cancel按钮的标签吗
【发布时间】：2017-03-07 12:58:33
【问题描述】：

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

【问题讨论】：

标签： javascript ckeditor customization

【解决方案1】：

有一个 override 方法可以覆盖传入的参数。它适用于我在 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
        }
    };
});

【讨论】：

【解决方案2】：

这里有两种方法：

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

【讨论】：

感谢您的回复。在发布到论坛之前，我尝试了这两种方法，但似乎都没有。 OK 和 Cancel 似乎是对话定义中的静态按钮，这是它们的实现，看起来我们不能轻易覆盖它们。
okButton: function () {var a = function (a, b) { b = b || {}; return CKEDITOR.tools.extend({ id: "ok", type: "button", label: a.lang.common.ok, "class": "cke_dialog_ui_button_ok", onClick: function (a) { a = a.data .dialog; !1 !== a.fire("ok", { hide: !0 }).hide && a.hide() } }, b, !0) }; a.type = "按钮"; a.override = function (b) { return CKEDITOR.tools.extend(function (c) { return a(c, b) }, { type: "button" }, !0) };返回一个}
确切地说，尝试在对话的 onLoad 处理程序中自定义 CKEDITOR.dialog.definition#buttons。它似乎在对象中更改它（在控制台中评估），但在 UI 中没有。
“它似乎在对象中改变它（在控制台中评估），但在 UI 中没有。” - 我认为这是因为您可能会在创建对话框之后覆盖它，是这样吗？
是的，没错。就像我告诉我的那样，我正在为对话框使用 onLoad 处理程序。是不是在加载对话框之后，如果我对对象进行更改，我必须做一些额外的事情来在 UI 中反映它？

【解决方案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);

                    });

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

【讨论】：

是的，丑陋。可能不是生产代码的选择:) 无论如何谢谢。
@Oceanvijai 同意了。但我没有在 image2 插件中找到任何对我有用的东西。而且我不能直接覆盖 image2 文件。我希望有人能提供更好的解决方案，这样我就可以避免这个好斗的问题。