0

I'm writing a plugin for ckeditor that will add s to the content, but I have run into a problem with the onclick, as it conflicts with the functionality of ckeditor.

If I register an onclick using:

commit: function( element ) {
    element.setAttribute( 'onclick' , 'window.location=\'' + this.getValue() + '\'');
}

In my dialog, clicks on the button will not open the edit element dialog of my plugin, but rather send me to the target of the buttons onclick.

Is there any way around this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Staffan Runnsjö
  • 76
  • 6
  • Have you tried using element.addEventListener? refer to http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick – LUIS PEREIRA Nov 04 '15 at 12:24
  • Alas, @luis-periera, the parameter element refers to CKEditors element [http://docs.ckeditor.com/#!/api/CKEDITOR.dom.element], so addEventListener is not a function. It has an .on('event type', function), but that gives the same behaviour as my original onclick solution – Staffan Runnsjö Nov 04 '15 at 12:45

1 Answers1

2

After a lot of fiddling around I concluded that it was not possible to use custom onclicks i ckeditor the way I wanted. Instead i devised the following workaround, since I am really only interested in the data returned from editor.getData() to be correct:

Instead of registering onclick like this in the dialog

element.setAttribute( 'onclick' , 'window.location=\'' + this.getValue() + '\'');

I created a custom data attribute for the location.href

element.setAttribute( 'data-custom-click' , 'location.href=\'' + this.getValue() + '\'');

Then, in the init of the plugin that creates the buttons and registers the above mentioned dialog, I registered two event handlers

editor.on('getData', function(e) {
    e.data.dataValue = e.data.dataValue.replace(' data-custom-click=', ' onclick=');
});

editor.on('setData', function(e) {
    e.data.dataValue = e.data.dataValue.replace(' onclick=',' data-custom-click=');
});

getData fires, according to the documentation

before the getData call returns, allowing for additional manipulation.

setData, on the other hand, fires

before the setData call is executed, allowing for additional manipulation.

So any editor with these event handlers will transform onclick to data-custom-click when loading html, thus rendering my buttons safe while editing, and transform any data-custom-click back to onclick when editor.getData() is called, giving me working buttons for the "real" page.

It is kind of a hack, but it works =)

Staffan Runnsjö
  • 76
  • 6