Attach click event to element in ckeditor

Question

This is the source of an element in ckeditor4-angular and I want to attach click event to implement custom functionality

<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>

I've called this on change event of editor

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

but it gives error "Cannot read property 'on' of undefined" can anyone guide me how to attach click event with element?

Answer 1

on* attributes inside CKEditor CKEditor encodes on* attributes when loading content so they are not breaking editing features. For example, onmouseout becomes data-cke-pa-onmouseout inside editor and then, when getting data from editor, this attributes is decoded.

There's no configuration option for this, because it wouldn't make sense.

Note: As you're setting attribute for element inside editor's editable element, you should set it to the protected format:

element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' ); Clickable elements in CKEditor If you want to observe click events in editor, then this is the correct solution:

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