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

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