时间戳

首页 > 解决方案 > 将点击事件附加到ckeditor中的元素

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

问题描述

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

<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'”谁能指导我如何将点击事件与元素附加？

标签： javascriptangularckeditorckeditor4.x

解决方案

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

对此没有配置选项，因为它没有意义。

注意：当您为编辑器的可编辑元素中的元素设置属性时，您应该将其设置为受保护的格式：

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

推荐阅读