Onclick event of inserted html button in ckeditor

Question

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?

Answer 1

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 =)