CODEWITHSUNDEEP
eventsckeditor
Kirubachari
Kirubachari

Reputation: 688

Add event listener to an element while inserting into 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.

Aim :

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

What i tried :

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

Problem :

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?

Upvotes: 2

Views: 1656

Answers (1)

oleq
oleq

Reputation: 15895

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!' );
                }
            } );
        }
    }
} );

Upvotes: 4

Related Questions