CKEDITOR - 如何添加永久的 onclick 事件? [英] CKEDITOR - how to add permanent onclick event?
问题描述
我正在寻找一种使 CKEDITOR 所见即所得内容具有交互性的方法.这意味着例如向特定元素添加一些 onclick 事件.我可以这样做:
I am looking for a way to make the CKEDITOR wysiwyg content interactive. This means for example adding some onclick events to the specific elements. I can do something like this:
CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');
处理此操作后效果很好.但因此，如果我将模式更改为源模式，然后返回到所见即所得模式，javascript 将不会运行.onclick 操作在源模式中仍然可见，但不会在 textarea 元素内呈现.
After processing this action it works nice. But consequently if I change the mode to source-mode and then return to wysiwyg-mode, the javascript won't run. The onclick action is still visible in the source-mode, but is not rendered inside the textarea element.
然而，有趣的是，这每次都能正常工作:
However, it is interesting, that this works fine everytime:
CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');
而且它也不会在 textarea 元素内部呈现！这怎么可能?处理 CKEDITOR 内容元素的 onclick 和 onmouse 事件的最佳方式是什么?
And it is also not rendered inside the textarea element! How is it possible? What is the best way to work with onclick and onmouse events of CKEDITOR content elements?
我尝试通过源模式手动编写:
I tried manually write this by the source-mode:
<html>
<head>
<title></title>
</head>
<body>
<p>
This is some <strong id="id1" onclick="alert('blabla');" style="cursor: pointer;">sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</body>
</html>
而且 Javascript(点击操作)不起作用.有什么想法吗?
And the Javascript (onclick action) does not work. Any ideas?
非常感谢！
我的最终解决方案:
editor.on('contentDom', function() {
var elements = editor.document.getElementsByTag('span');
for (var i = 0, c = elements.count(); i < c; i++) {
var e = new CKEDITOR.dom.element(elements.$.item(i));
if (hasSemanticAttribute(e)) {
// leve tlacitko mysi - obsluha
e.on('click', function() {
if (this.getAttribute('class') === marked) {
if (editor.document.$.getElementsByClassName(marked_unique).length > 0) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked_unique);
}
} else if (this.getAttribute('class') === marked_unique) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked);
}
});
}
}
});
推荐答案
Filtering (only CKEditor >=4.1)
这个属性被删除了，因为CKEditor不允许.此过滤系统称为高级内容过滤器，您可以在此处阅读:
Filtering (only CKEditor >=4.1)
This attribute is removed because CKEditor does not allow it. This filtering system is called Advanced Content Filter and you can read about it here:
- http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
- http://ckeditor.com/blog/CKEditor-4.1-Released
- 高级内容过滤指南
简而言之 - 您需要配置编辑器以在某些元素上允许 onclick 属性.例如:
In short - you need to configure editor to allow onclick attributes on some elements. For example:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'strong[onclick]'
} );
在此处阅读更多信息:config.extraAllowedContent.
Read more here: config.extraAllowedContent.
CKEditor 在加载内容时对 on* 属性进行编码，因此它们不会破坏编辑功能.例如，onmouseout 在编辑器中变成 data-cke-pa-onmouseout ，然后当从编辑器中获取数据时，这个属性被解码.
CKEditor encodes on* attributes when loading content so they are not breaking editing features. For example, onmouseout becomes data-cke-pa-onmouseout inside editor and then, when getting data from editor, this attributes is decoded.
对此没有配置选项，因为它没有意义.
There's no configuration option for this, because it wouldn't make sense.
注意:当您在编辑器的可编辑元素中为元素设置属性时，您应该将其设置为受保护的格式:
Note: As you're setting attribute for element inside editor's editable element, you should set it to the protected format:
element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );
CKEditor 中的可点击元素
如果你想在编辑器中观察点击事件，那么这是正确的解决方案:
Clickable elements in CKEditor
If you want to observe click events in editor, then this is the correct solution:
editor.on( 'contentDom', function() {
var element = editor.document.getById( 'foo' );
editor.editable().attachListener( element, 'click', function( evt ) {
// ...
// Get the event target (needed for events delegation).
evt.data.getTarget();
} );
} );
检查 editor#contentDom 事件，这在这种情况下非常重要.
Check the documentation for editor#contentDom event which is very important in such cases.
这篇关于CKEDITOR - 如何添加永久的 onclick 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
