CKEDITOR - 如何添加永久onclick事件？ [英] CKEDITOR - how to add permanent onclick event?
问题描述
我在寻找一种使CKEDITOR wysiwyg内容互动的方法。这意味着例如向特定元素添加一些onclick事件。我可以这样做：
CKEDITOR.instances ['editor1']。document.getById（'someid'）。setAttribute （'onclick'，'alert（blabla）'）;
处理此操作后，效果很好。但是，因此，如果我将模式更改为源模式，然后返回到wysiwyg模式，javascript将无法运行。 onclick操作在源模式中仍然可见，但不会在textarea元素中呈现。
但是，很有趣的是，这项工作每次都很好：
CKEDITOR.instances ['editor1']。document.getById（'id1'）。setAttribute（'style'，'cursor：pointer;'）;
并且它也不会在textarea元素中呈现！这怎么可能？什么是使用CKEDITOR内容元素的onclick和onmouse事件的最佳方式？
我尝试通过源模式手动写入：
< html>
< head>
< title>< / title>
< / head>
< body>
< p>
这是一些< strong id =id1onclick =alert（'blabla'）; style =cursor：pointer;>示例文本< / strong>。您正在使用< a href =http://ckeditor.com/> CKEditor< / a>。< / p>
< / body>
< / html>
Javascript（onclick操作）不起作用。任何想法？
非常感谢！
我的最终解决方案：
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）;
}
}）;
}
}
}）;
过滤（仅CKEditor> = 4.1）
此属性被删除，因为CKEditor不允许它。此过滤系统称为高级内容过滤器，您可以在此处阅读：
- http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
- < a href =http://ckeditor.com/blog/CKEditor-4.1-Released =nofollow> http://ckeditor.com/blog/CKEditor-4.1-已发布
- 高级内容过滤指南
简而言之，您需要配置编辑器以允许某些元素上的 onclick 属性。例如：
CKEDITOR.replace（'editor1'，{
extraAllowedContent：'strong [onclick]'
}）;
阅读更多： config.extraAllowedContent 。
CKEditor中的
on * 属性
CKEditor会将 $ c>属性，当加载内容，所以他们不打破编辑功能。例如， onmouseout 在编辑器中变成 data-cke-pa-onmouseout ，然后，属性被解码。
没有配置选项，因为它没有意义。
strong>注意：当您在编辑器的可编辑元素中设置元素的属性时，应将其设置为受保护的格式：
element.setAttribute（'data-cke-pa-onclick'，'alert（blabla）'）;
CKEditor中的可点击元素
想要在编辑器中观察点击事件，那么这是正确的解决方案：
editor.on（'contentDom'，function {
var element = editor.document.getById（'foo'）;
editor.editable（）。attachListener（element，'click'，function（evt）{
// .. 。
//获取事件目标（事件委托所需）。
evt.data.getTarget（）;
}）;
}）;
检查 编辑器＃contentDom 事件在这种情况下非常重要。
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")');
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;');
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>
And the Javascript (onclick action) does not work. Any ideas?
Thanks a lot!
My final solution:
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)
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
- Advanced Content Filter guide
In short - you need to configure editor to allow onclick attributes on some elements. For example:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'strong[onclick]'
} );
Read more here: config.extraAllowedContent.
on* attributes inside CKEditor
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")' );
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();
} );
} );
Check the documentation for editor#contentDom event which is very important in such cases.
这篇关于CKEDITOR - 如何添加永久onclick事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
