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

我在网站上使用CKEditor，我需要能够在通过编辑器创建的某些链接上放置特殊的数据属性。用户可以通过选中链接对话框中的复选框来指示他们需要放置在链接上的特殊属性。我设法添加一个复选框到链接对话框，下面的代码：修改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的任何文件。

我该如何做到这些？

来源

2012-10-15 Alex Turpin

你最好的选择是修改插件。所以你需要打开源代码并找到文件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-23 17:35:15

这是非常好的，但我担心更新CKEditor并覆盖这些更改后。你确定没有办法修改文件本身吗？ –

我不认为有另一种方式来做到这一点。我明白了你的观点，但你只需对源代码中的1个文件进行3个小改动，这需要1分钟才能完成。您可以随时备份“链接”文件夹并将其视为插件。所以如果你需要更新，你总是会解压缩包含你自己功能的文件。 –

@ Xeon06你试过了吗？读取CKEditor的源代码时，链接对话框不会将这些功能公开给主配置。修改源代码是唯一的解决方案。 –

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

获取基本CKEditor的安装没有链接插件
创建自己的链接插件的叉，并添加我的更改，然后激活和使用这个插件内的组连接正常显示英寸

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

来源

2013-03-02 18:55:45

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

回答

相关问题