CKEditor event when deleting an element?

Question

Is there a way in JavaScript (or CKEditor) to detect when an image is removed from CKEditor. I need it for a caption element which is inserted together with the image, but once I delete the image, the caption should be deleted aswell.

Any help would be greatly appreciated.

Answer 1

I know this is rather old, but I ended up here while searching a solution, so I think it's worth to post another approach.

I didn't want to monitor all possible changes, since most of the activity I forsee in my widget is normal editing or widget creation from external sources, so I ended up simply monitoring the events that would cause the deletion:

    editor.widgets.on( 'instanceCreated', function(evt) {
        let widget = evt.data ;
        if (widget.name === 'mywidget') {
            widget.on('select', function() {
                widget.on('key', function(evt) {
                    if ( evt.data.keyCode == 46                       // Delete
                         || evt.data.keyCode == 8                     // Backspace
                         || evt.data.keyCode == CKEDITOR.CTRL + 88    // Ctrl-X
                    )
                        jQuery(widget.element.$).myCallback() ;    // callback defined as a jQuery function for the sake of simplicity
                }) ;
            }) ;
            widget.on('deselect', function() {
                widget.on('key', function(evt) {
                }) ;
            }) ;
        }
    }) ;

Of course the callback has to assume that the calling widget has not been deleted yet, but that's an advantage, since one typically needs its data.

Answer 2

There are no special event like a onDelete or onImageRemovedFromContent. But there are few events that can help you.

editor.on('afterUndoImage', function( e ){ ... } )

But afterUndoImage fires only on Undo command, does not fires on manual deleting of elements.

editor.on('afterCommandExec', function( e ){ ... } )

CKEditor changes content with execCommand (mostly), so that fires on many content's change, so you can check the diff with regex for example.

Also you can use plugin onchange to detect the changes of contents, it combines onUndo, onRedo, afterCommandExec, etc.