Question

我在网站上使用CKEditor，我需要能够在通过编辑器创建的某些链接上放置特殊的数据属性。用户通过选中链接对话框中的复选框，指示他们需要放置在链接上的特殊属性。我已设法使用以下代码在链接对话框中添加一个复选框：

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == "link") {
        var info = dialog.getContents("info");
        info.elements.push({
            type: "vbox",
            id: "urlOptions",
            children: [{
                type: "hbox",
                children: [{
                    id: "button",
                    type: "checkbox",
                    label: "Button",
                    commit: function(data) {
                        data.button = this.getValue()
                        console.log("commit", data.button, data);
                    },
                    setup: function(data) {
                        this.setValue(data.button);
                        console.log("setup", data.button, data);
                    }
                }]
            }]
        });
    }
});

现在我有两个问题。第一个是尽管我在commit和setup函数中添加了应该保存复选框状态的代码，但它无效。好像data不能保存任何其他参数，而是默认情况下那些参数。

第二个问题是我不知道如何在我的链接上添加/删除数据属性。在我看来，我应该在对话框的onOk回调中这样做，但是，链接对话框已经有onOk回调，所以我不确定我应该如何进行。当然，我不想直接修改任何CKEditor的文件。

我怎样才能完成这些事情？

Answer 1

您最好的选择是修改插件。因此，您需要打开源代码并在links.js

中找到文件c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\

源代码非常大（40k）但是在这里您可以根据需要修改对话框。完成后，只需将其复制到您的插件文件夹，然后压缩它：http://jscompress.com/

我已经完成了你自己需要的事情。整个未压缩文件位于：https://gist.github.com/3940239

您需要做什么：

首先在添加对话框“浏览”按钮之前添加此行。约。排队：547：

                        {
                            id: "button",
                            type: "checkbox",
                            label: "Button",
                            setup: function (data) {
                                this.allowOnChange = false;

                                if (data.button)
                                    this.setValue(data.button);

                                this.allowOnChange = true;
                            },
                            commit: function (data) {
                                data.button = this.getValue()
                                this.allowOnChange = false;
                            }
                        },

这部分实际上就是你的代码。我只是复制并粘贴它。

然后，转到onOk功能，约。在第1211行：在commitContent之后添加以下代码：

this.commitContent( data );

//My custom attribute
if (data.button)
    attributes["custom-attribute"] = "button";
else
    attributes["custom-attribute"] = "";

这将修改您的链接，将属性添加到元素，例如<a href="#" custom-attribute="button">text</a>

就是这样。虽然，您可能还想加载复选框的当前状态。然后，转到函数parseLink。约。第179行加载属性：

...
if ( element )
{
    retval.button = element.getAttribute('custom-attribute');

    var target = element.getAttribute( 'target' );
...

Answer 2

我现在正在探索同样的事情。我此时决定做的是：

获取没有链接插件的基本ckeditor安装
创建我自己的链接插件分支，并将我的更改添加到其中，然后激活并在链接通常显示的组中使用此插件。

...使用它作为自定义插件（虽然是原始副本）应该可以缓解升级问题。你只是根本不使用原始的链接插件。复制并重命名，然后使用您的自定义副本。

修改CKEditor链接对话框以向链接添加自定义属性

2 个答案: