javascript 修改 CKEditor 链接对话框以向链接添加自定义属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12903425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modify CKEditor link dialog to add custom attribute to links
提问by Alex Turpin
I am using CKEditor on a website and I need to be able to put a special data attributes on some of the links created through the editor. The user would indicate that they need the special attribute put on the link by checking a checkbox in the link dialog. I have managed to add a checkbox to the link dialog with the following code:
我在网站上使用 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);
}
}]
}]
});
}
});
Now I have two problems. The first one is that despite me adding the code in the commitand setupfunctions that should save the state of the checkbox, it's not working. It's as if the datacan't hold any other parameters but the ones there by default.
现在我有两个问题。第一个是，尽管我在commit和setup函数中添加了应该保存复选框状态的代码，但它不起作用。就好像data除了默认情况下不能保存任何其他参数一样。
The second problem is that I don't know how to add / remove the data attribute on my links. It seems to me that I should be doing that in my onOkcallback on the dialog, however, the link dialog already has an onOkcallback, so I'm not sure how I should be proceeding. I, of course, do not want to modify any of CKEditor's files directly.
第二个问题是我不知道如何在我的链接上添加/删除数据属性。在我看来，我应该onOk在对话框的回调中这样做，但是，链接对话框已经有了onOk回调，所以我不确定应该如何进行。我当然不想直接修改 CKEditor 的任何文件。
How can I accomplish these things?
我怎样才能完成这些事情？
采纳答案by Carlos Martinez T
You best option is to modify the plugin. So you need to open the source code and find the file links.jsin c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\
您最好的选择是修改插件。所以，你需要打开源代码和查找文件links.js中c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\
The source code is quite big (40k) but here you can modify the dialog however you want. When you finish just copy it to your plugins folder, and compress it: http://jscompress.com/
源代码很大（40k），但在这里您可以根据需要修改对话框。完成后，只需将其复制到您的插件文件夹，然后压缩它：http: //jscompress.com/
I have done what you need myself. The whole uncompressed file is here: https://gist.github.com/3940239
我已经做了你自己需要的。整个未压缩文件在这里：https: //gist.github.com/3940239
What you need to do:
你需要做什么：
First add this line just before the dialog "browse" button is appended. Approx. in line: 547:
首先在附加对话框“浏览”按钮之前添加此行。大约 在线：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;
}
},
This part is actually your code. I just copied and pasted it.
这部分实际上是您的代码。我只是复制并粘贴了它。
Then, go to the onOk function, approx. in line 1211: and after commitContent add this code:
然后，转到 onOk 功能，大约。在第 1211 行：并在 commitContent 之后添加以下代码：
this.commitContent( data );
//My custom attribute
if (data.button)
attributes["custom-attribute"] = "button";
else
attributes["custom-attribute"] = "";
This will modify your link adding the attribute to the element such as <a href="#" custom-attribute="button">text</a>
这将修改您的链接，将属性添加到元素，例如 <a href="#" custom-attribute="button">text</a>
That's it. Although, you may also like to load the current status of the checkbox. Then, go to the function parseLink. Approx. line 179 to load the attributes:
而已。虽然，您可能还想加载复选框的当前状态。然后，转到函数parseLink。大约 第 179 行加载属性：
...
if ( element )
{
retval.button = element.getAttribute('custom-attribute');
var target = element.getAttribute( 'target' );
...
回答by Sam Rose
I am exploring the same thing now. What I have decided to do at this point is to:
我现在正在探索同样的事情。我现在决定做的是：
- Get a base ckeditor install without the link plugin
- create my own fork of the link plugin, and add my changes to it, then activate and use this plugin within the group that link normally shows up in.
- 在没有链接插件的情况下获得基本的 ckeditor 安装
- 创建我自己的链接插件分支，并将我的更改添加到它，然后在链接通常显示的组中激活并使用此插件。
...working with it as a custom plugin (albeit a copy of the original) should alleviate the problem of upgrading. You just simply do not use the original link plugin at all. Copy and rename it, and use your custom copy instead.
...使用它作为自定义插件（尽管是原始插件的副本）应该可以缓解升级问题。您只是根本不使用原始链接插件。复制并重命名它，并改用您的自定义副本。
