CKEDITOR - 如何添加永久性onclick事件? [英] CKEDITOR - how to add permanent onclick event?
问题描述
CKEDITOR.instances ['editor1']。document.getById('someid')。setAttribute ( '的onclick', '警报( 布拉布拉)');
处理完这个动作后,它的效果很好。但是,如果我将模式更改为源模式,然后返回到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 action)不起作用。任何想法?
非常感谢!
我的最终解决方案:
editor.on('contentDom' ,function(){
var elements = editor.document.getElementsByTag('span');
for(var i = 0,c = elements.count(); 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))。长度> 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 =noreferrer> http://ckeditor.com/blog/CKEditor-4.1-Released
- 高级内容过滤器指南
简单来说,您需要配置编辑器以允许某些元素上的
onclick
属性。例如: CKEDITOR.replace('editor1',{
extraAllowedContent:'strong [onclick]'
});
阅读更多: config.extraAllowedContent
。
on *
CKEditor中的属性
CKEditor编码 on *
属性加载内容时,不会破坏编辑功能。例如,$ code> onmouseout 在编辑器内成为 data-cke-pa-onmouseout
,然后从编辑器获取数据时属性被解码。
没有配置选项,因为没有意义。
注意:当您在编辑器的可编辑元素中设置元素的属性时,应将其设置为受保护的格式:
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();
});
});
检查 editor#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屋!