CKEDITOR - how to add permanent onclick event?

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

CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');

After processing this action it works nice. But consequently if I change the mode to source-mode and then return to wysiwyg-mode, the javascript won't run. The onclick action is still visible in the source-mode, but is not rendered inside the textarea element.

However, it is interesting, that this works fine everytime:

CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');

And it is also not rendered inside the textarea element! How is it possible? What is the best way to work with onclick and onmouse events of CKEDITOR content elements?

I tried manually write this by the source-mode:

    <html>
    <head>
        <title></title>
    </head>
    <body>
        <p>
            This is some <strong id="id1" onclick="alert('blabla');" style="cursor: pointer;">sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
    </body>
</html>

And the Javascript (onclick action) does not work. Any ideas?

Thanks a lot!

My final solution:

               editor.on('contentDom', function() {
                var elements = editor.document.getElementsByTag('span');
                for (var i = 0, c = elements.count(); i < c; i++) {
                    var e = new CKEDITOR.dom.element(elements.$.item(i));
                    if (hasSemanticAttribute(e)) {
                        // leve tlacitko mysi - obsluha
                        e.on('click', function() {
                            if (this.getAttribute('class') === marked) {
                                if (editor.document.$.getElementsByClassName(marked_unique).length > 0) {
                                    this.removeAttribute('class');
                                } else {
                                    this.setAttribute('class', marked_unique);
                                }
                            } else if (this.getAttribute('class') === marked_unique) {
                                this.removeAttribute('class');
                            } else {
                                this.setAttribute('class', marked);
                            }
                        });
                    }
                }
            });

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:

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.

来源：https://stackoverflow.com/questions/17045329/ckeditor-how-to-add-permanent-onclick-event

标签

events

ckeditor

CKEDITOR - how to add permanent onclick event?

Filtering (only CKEditor >=4.1)

on* attributes inside CKEditor

Clickable elements in CKEditor

`on*` attributes inside CKEditor