How to add buttons on ckeditor widgets that have some functionality built in?

Question

I have modified the simplebox widget given in this widget tutorial to include these three buttons on hover.

I want to enable some functionality in these buttons, i.e. run some javascript on their click event. E.g. With delete button the widget instance gets destroyed (looking through doc I found the destroy method for widget). But how I should go about attaching that method on this button's click event.

Also wanted to know, how to stop event bubbling (event.stopPropagation) in CKEditor to stop further events from happening on the click event.

Any advice will be helpful. Have been struggling with this for long.

And yes, this editor rocks. :)

Answer 1

I did it by inserting the following code in editor.widgets.add( 'simplebox', { init property.

that = this;
buttons = this.element.getElementsByTag("button");

//getItem(2) points to the third button element which is delete
buttons.getItem(2).on("click", function() {
    //destroys the dom of the widget
    that.wrapper.remove();
    //destroys widget from memory
    CKEDITOR.instances.editor1.widgets.destroy(that, true);
});

wrapper.remove() removes dom elements of the widget and the next line destroys widget implementation.