All geek questions in one place

CKEDITOR - how to add a permanent onclick event?

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

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

After processing this action, it works well. But, therefore, if I switch the mode to its original mode and then return to the wysiwyg mode, javascript will not work. The onclick action is still displayed in native mode, but not displayed inside the textarea element.

However, it is interesting that this works great every time:

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

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

I tried to manually write this in 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 Javascript (onclick action) is not working. Any ideas?

Thanks a lot!

My final decision:

  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); } }); } } });
+6
source share
1 answer

Filtering (only CKEditor> = 4.1)

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

In short - you need to configure the editor so that onclick attributes appear on some elements. For instance:

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

More details here: config.extraAllowedContent .

on* attributes inside CKEditor

CKEditor encodes the on* attributes when loading content so that they do not violate the editing functions. For example, onmouseout becomes data-cke-pa-onmouseout inside the editor, and then, when receiving data from the editor, these attributes are decoded.

There is no configuration option for this, because it does not make sense.

Note Since you are setting an attribute for an element inside an editable editing element, you must set it to a protected format:

 element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );

Clickable elements in CKEditor

If you want to observe click events in the editor, then this is the right 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 out the editor#contentDom event documentation, which is very important in such cases.

+10
source

Source: https://habr.com/ru/post/947030/

More articles:


All Articles