15

我在网站上使用 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);
                    }
                }]
            }]
        });
    }
});

现在我有两个问题。第一个是尽管我在commitandsetup函数中添加了应该保存复选框状态的代码，但它不起作用。就好像data除了默认情况下的参数之外，不能保存任何其他参数。

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

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

4

2 回答 2

10

您最好的选择是修改插件。所以你需要打开源代码并找到文件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' );
...
于 2012-10-23T17:35:15.520 回答
0

我现在正在探索同样的事情。我决定在这一点上做的是：

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

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

于 2013-03-02T18:55:45.647 回答