将点击事件附加到ckeditor中的元素

问题描述

这是ckeditor4-angular中元素的来源，我想附加click事件以实现自定义功能

<div class="fractional-block" id="fractional-block"><span>5</span><svg height="5" width="100%"><line stroke="#000" stroke-width="2" x1="0" x2="100%" y1="0" y2="0"></line></svg><span>6</span></div>

我在编辑器的更改事件上称呼它

this.CKEDITOR.instance['fractional-block'].on('contentDom',function() {
  this.document.on('click',function(event){
    console.log('click',event)
  });
});

但是出现错误“无法读取未定义的属性'on'”，有人可以指导我如何将click事件附加到元素吗？

解决方法

CKEditor中的

on *属性 CKEditor在加载内容时对on *属性进行编码，因此它们不会破坏编辑功能。例如，onmouseout变为编辑器内部的data-cke-pa-onmouseout，然后，当从编辑器获取数据时，此属性将被解码。

没有配置选项，因为这没有意义。

注意：在编辑器的editable元素内设置元素的属性时，应将其设置为受保护的格式：

element.setAttribute（'data-cke-pa-onclick'，'alert（“ blabla”）'）; CKEditor中的可单击元素 如果要在编辑器中观察单击事件，那么这是正确的解决方案：

editor.on( 'contentDom',function() {
    var element = editor.document.getById( 'bar' );
    editor.editable().attachListener( element,'click',function( evt ) {
        // ...

        // Get the event target (needed for events delegation).
        evt.data.getTarget();
    } );
} );