Javascript 删除元素时的CKEditor事件？

JavaScript（或CKEditor）中是否有方法检测何时从CKEditor中删除图像。 我需要一个标题元素，它与图像一起插入，但一旦我删除了图像，标题也应该被删除

---

如果有任何帮助，我们将不胜感激。

没有像“onDelete”或“onImageRemovedFromContent”这样的特殊事件。但是几乎没有什么活动可以帮助你

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

但是

afterUndoImage

仅在

Undo

命令时激发，在手动删除元素时不激发

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

CKEditor使用

execCommand

（大多数情况下）更改内容，以便触发许多内容的更改，因此您可以使用regex检查差异

---

您还可以使用插件来检测内容的更改，它结合了

onUndo

，

onRedo

，

afterCommandExec

，等等。

没有像

onDelete

或

onImageRemovedFromContent

这样的特殊事件。但是几乎没有什么活动可以帮助你

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

但是

afterUndoImage

仅在

Undo

命令时激发，在手动删除元素时不激发

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

CKEditor使用

execCommand

（大多数情况下）更改内容，以便触发许多内容的更改，因此您可以使用regex检查差异

---

您还可以使用插件来检测内容的变化，它结合了

onUndo

，

onRedo

，

afterCommandExec

，等等。

我知道这是一个很老的方法，但我在搜索解决方案时就到了这里，所以我认为发布另一种方法是值得的

我不想监视所有可能的更改，因为我在小部件中看到的大多数活动都是从外部源进行的正常编辑或小部件创建，所以我只监视可能导致删除的事件：

    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) {
                }) ;
            }) ;
        }
    }) ;

---

当然，回调必须假设调用的小部件还没有被删除，但这是一个优势，因为人们通常需要它的数据。

我知道这很旧，但我在搜索解决方案时结束了，所以我认为值得发布另一种方法

我不想监视所有可能的更改，因为我在小部件中看到的大多数活动都是从外部源进行的正常编辑或小部件创建，所以我只监视可能导致删除的事件：

    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) {
                }) ;
            }) ;
        }
    }) ;

当然，回调必须假设调用的小部件尚未被删除，但这是一个优势，因为人们通常需要它的数据。

使用插件-->

此插件使您能够传递自己的回调函数，当您从编辑器中删除图像时，将调用该函数。我在VueJs中实现了这一点，在花了几个小时之后，我意识到这很容易做到。如果你问我的话，这是一个很酷的插件。下面的代码片段演示了实现此功能的非Vuejs方法。如果您需要了解VueJs实现，可以给我回信

谢谢

注意：这个代码片段来自软件包文档，这就是所有的信息

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.com/docs/ckeditor5/latest/api/module_engine_model_node-Node.html

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

使用插件-->

此插件使您能够传递自己的回调函数，当您从编辑器中删除图像时，将调用该函数。我在VueJs中实现了这一点，在花了几个小时之后，我意识到这很容易做到。如果你问我的话，这是一个很酷的插件。下面的代码片段演示了实现此功能的非Vuejs方法。如果您需要了解VueJs实现，可以给我回信

谢谢

注意：这个代码片段来自软件包文档，这就是所有的信息

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.com/docs/ckeditor5/latest/api/module_engine_model_node-Node.html

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