Add event listener to an element while inserting into CKEDITOR?

Question

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?

See http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — Reinmar, Dec 11 '14 at 10:48

score 5 · Accepted Answer · edited May 23 '17 at 12:09

5

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

edited May 23 '17 at 12:09

Community

1
1

answered Dec 11 '14 at 10:50

oleq

17,023
2
34
63

1

Thanks for the answer – Kirubachari Dec 12 '14 at 03:32

Add event listener to an element while inserting into CKEDITOR?

1 Answers1

Linked