在插入CKEDITOR时向元素添加事件监听器？ [英] Add event listener to an element while inserting into CKEDITOR?

问题描述

我是CKEDITOR的新手。你们中有些人回答这个问题可能听起来毫无价值。但是，我在为过去几个小时内的问题找到解决方案。

I'm newbie to CKEDITOR. It might sound worthless to some of you to answer this questions. But, I'm struggling to find a solution for my problem for the past few hours.

目标：

我想为特定类型的元素添加事件监听器（例如： span ）

I would like to add an event listener to particular kind of element ( For ex : span )

我尝试的：

我使用 contentDom CKEDITOR ，将事件侦听器添加到 span 元素。

I used contentDom event thrown by CKEDITOR, to add the event listener to span elements.

问题：

但是，将事件侦听器添加到 span 将适用于当前在编辑器中可用的 span 。但是，不适用于将来由用户创建的元素（ span ）。我现在应该怎么办？

However, Adding event listener to span will be applicable for the span which are currently available in editor. But, Not for the elements ( span ) which will be created by the user in future. What should i do now?

推荐答案

使用事件冒泡的好处[ 1 ， 2 ]。将侦听器附加到编辑器的最上层元素（可编辑），并过滤掉事件：

Use the benefits of event bubbling [1, 2]. Attach the listener to the topmost element of the editor (editable) and filter out the events:

CKEDITOR.replace( 'editor1', {
    on: {
        contentDom: function() {
            this.editable().on( 'click', function( evt ) {
                var target = evt.data.getTarget();

                if ( target.is( 'span' ) ) {
                    console.log( 'clicked span!' );
                }
            } );
        }
    }
} );

这篇关于在插入CKEDITOR时向元素添加事件监听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！