CKEDITOR - 如何添加永久性onclick事件？

本文介绍了CKEDITOR - 如何添加永久性onclick事件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我正在寻找一种使CKEDITOR wysiwyg内容互动的方法。这意味着例如将一些onclick事件添加到特定元素。我可以这样做： 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> 这是一些示例文本 ;.您正在使用< a href =http://ckeditor.com/> CKEditor< / a>。 < / 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 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> This is some sample text. You are using <a href="http://ckeditor.com/">CKEditor</a>. </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.1http://ckeditor.com/blog/CKEditor-4.1-ReleasedAdvanced Content Filter guideIn 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 CKEditorCKEditor 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 CKEditorIf 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事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！