CKEDITOR - how to add permanent onclick event?

Question

I am looking for a way to make the CKEDITOR wysiwyg content interactive. This means for example adding some onclick events to the specific elements. I can do something like

Answer 1

Filtering (only CKEditor >=4.1)

This attribute is removed because CKEditor does not allow it. This filtering system is called Advanced Content Filter and you can read about it here:

• http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
• http://ckeditor.com/blog/CKEditor-4.1-Released
• Advanced Content Filter guide

In short - you need to configure editor to allow onclick attributes on some elements. For example:

CKEDITOR.replace( 'editor1', {
    extraAllowedContent: 'strong[onclick]'
} );

Read more here: config.extraAllowedContent.

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( 'foo' );
    editor.editable().attachListener( element, 'click', function( evt ) {
        // ...

        // Get the event target (needed for events delegation).
        evt.data.getTarget();
    } );
} );

Check the documentation for editor#contentDom event which is very important in such cases.