CKEDITOR - how to add permanent onclick event?

events ckeditor

10,812

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.

10,812

Petr Dušek

Updated on June 04, 2022

Comments

Petr Dušek almost 2 years

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

Petr Dušek almost 11 years

Thanks a lot! But I am using ice:inputRichText which includes CKEDITOR version 3.x. I am not sure if there is such a property...
Reinmar almost 11 years

Ok, then there's no ACF :P It was introduced in CKEditor 4.1.
Petr Dušek almost 11 years

Everything I need is: clickable elements in CKEDITOR content. Is it possible to make it by handling some CKEDITOR events? (maybe this: docs.cksource.com/ckeditor_api/symbols/…)
Reinmar almost 11 years

I updated my answer. If you want clickable elements inside editor, then you'll be interested in attaching click to docs.ckeditor.com/#!/api/CKEDITOR.editor-method-editable and checking target. I'll update my answer with this.
Petr Dušek almost 11 years

But this is also for the version 4, isn't it? (editable() function)
Petr Dušek almost 11 years

I have solved it - thanks to Reinmar!!! You have made my day :-)). Everything I must have done is this: add the onclick event-handling to the contentDom.
Elijah Lynn about 9 years

Reinmar, you mention checking the target after attaching click to the editable. In my case I don't see a target in the event object. Could you specify where to look for the target? Thanks
Elijah Lynn about 9 years

I see event.data.$.currentTarget but that appears to be the editor itself. Not the element I clicked on. Maybe I attached the listener incorrectly. I did editable.attachListener(editable, 'click', function(event) { instead of passing the element.
Reinmar about 9 years

I updated the code in my answer to show how to get the event target. The target will be the node that was clicked.
bharatpatel almost 9 years

@Reinmar can you please help me for my question : stackoverflow.com/questions/31458337/…
Vishnu about 5 years

I have to add (click) instead of onclick How do I add in Ckeditor