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.

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.

• javascript
• plugins
• ckeditor

4 Answers 4

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 mand, 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 bines onUndo, onRedo, afterCommandExec, etc.

Use the plugin--> https://github./shibbirweb/ckeditor5-image-remove-event-callback-plugin

This plugin enables you to pass your own callback function which will be called when you will remove the image from your editor. I implemented this in VueJs and after having spent a couple of hours, I realized it was quite easy to do so. Its a cool plugin if you ask me. The below code snippet demonstrate the non-Vuejs way to implement this. You can write back to me if you need to know the VueJs implementation.

Thanks

P.S. : This code snippet is from the package documentation and that's all the info there is.

import ImageRemoveEventCallbackPlugin from 'ckeditor5-image-remove-event-callback-plugin'; // Add this
// ...

ClassicEditor.builtinPlugins = [
    // ...
    ImageRemoveEventCallbackPlugin
    // ...

]
ClassicEditor.create(document.querySelector('#editor'), {
    //... 
    imageRemoveEvent: {
        callback: (imagesSrc, nodeObjects) => {
            // note: imagesSrc is array of src & nodeObjects is array of nodeObject
            // node object api: https://ckeditor./docs/ckeditor5/latest/api/module_engine_model_node-Node.html

            console.log('callback called', imagesSrc, nodeObjects)
        }
    },
    // ...
});

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.

in React (Typescript) and CKEditor 5 you can add listener and check type if remove

 const [editor, setEditor] = useState<Editor | null>(null)


 useEffect(() => {
    if (editor) {
      editor.model.document.on("change:data", () => {
        const removedItems = Array.from(
          editor.model.document.differ.getChanges()
        ).filter((change) => change.type === "remove")
        // console.log(removedItems)
        removedItems.forEach((removedItem) => {
          const src = removedItem.attributes.get("src")
          if (src) {
            console.log("Deleted image URL:", src)
            // Perform any action required with the URL
          }
        })
      })
    }
  }, [editor])


return 
 <div className="main-container">
        <div
          className="editor-container editor-container_classic-editor"
          ref={editorContainerRef}
        >
          <div className="editor-container__editor">
            <div ref={editorRef}>
              {editorConfig && (
                <CKEditor
                  editor={ClassicEditor}
                  config={editorConfig}
                  onReady={(e) => setEditor(e)}
                />
              )}
            </div>
          </div>
        </div>
      </div>