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

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

events ckeditor

Events CKEDITOR-如何添加永久onclick事件？,events,ckeditor,Events,Ckeditor,我正在寻找一种使CKEDITOR wysiwyg内容具有交互性的方法。例如，这意味着向特定元素添加一些onclick事件。我可以这样做： CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")'); 处理完这个动作后，效果很好。但是，如果我将模式更改为源模式，然后返回所见即所得模式，javascript将不会运行。onclick操作在源模式下仍然可见，但不会

我正在寻找一种使CKEDITOR wysiwyg内容具有交互性的方法。例如，这意味着向特定元素添加一些onclick事件。我可以这样做：

CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');

处理完这个动作后，效果很好。但是，如果我将模式更改为源模式，然后返回所见即所得模式，javascript将不会运行。onclick操作在源模式下仍然可见，但不会在textarea元素内呈现

然而，有趣的是，这种方法每次都很有效：

CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');

而且它也不会在textarea元素内部渲染！怎么可能呢？使用CKEDITOR内容元素的onclick和onmouse事件的最佳方式是什么

我尝试通过源模式手动写入此内容：

    <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（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);
                            }
                        });
                    }
                }
            });

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.on（'contentDom'，function（））{
var elements=editor.document.getElementsByTag（'span'）；
for（var i=0，c=elements.count（）；i0）{
此.removeAttribute（“类”）；
}否则{
this.setAttribute（'class'，标记为_unique）；
}
}else if（this.getAttribute（'class'）==标记为\u唯一）{
此.removeAttribute（“类”）；
}否则{
此.setAttribute（'class'，已标记）；
}
});
}
}
});

过滤（仅CKEditor>=4.1）此属性已删除，因为CKEditor不允许此属性。此过滤系统称为高级内容过滤器，您可以在此处阅读：

简而言之，您需要将编辑器配置为允许在某些元素上单击

onclick

属性。例如：

CKEDITOR.replace( 'editor1', {
    extraAllowedContent: 'strong[onclick]'
} );

请在此处阅读更多：

on*

编辑器中的属性 CKEditor在加载内容时对*属性进行

编码，这样它们就不会破坏编辑功能。例如，onmouseout
在编辑器内变为data cke pa onmouseout
，然后从编辑器获取数据时，该属性被解码
这没有配置选项，因为它没有意义
注意：在编辑器的可编辑元素中为元素设置属性时，应将其设置为受保护的格式：
element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );

CKEditor中的可单击元素
如果要在编辑器中观察单击事件，则以下是正确的解决方案：
               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);
                            }
                        });
                    }
                }
            });

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();
    } );
} );

查看文档，在这种情况下，这一点非常重要。
非常感谢！但我使用的是ice:inputRichText，其中包括CKEDITOR版本3.x。我不确定是否有这样的属性…好的，那么就没有ACF:P了，它是在CKEditor 4.1中引入的。我需要的是：CKEditor内容中的可单击元素。是否可以通过处理某些CKEDITOR事件来实现？（可能是这样：）我更新了我的答案。如果您希望在编辑器中使用可单击的元素，那么您将感兴趣的是将单击
附加到目标并检查目标。我将用此更新我的答案。我更新了答案中的代码以显示如何获取事件目标。目标将是单击的节点。