删除元素时的CKEditor事件？答案

【问题标题】：CKEditor event when deleting an element?删除元素时的CKEditor事件？
【发布时间】：2011-11-18 18:28:00
【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

没有像onDelete 或onImageRemovedFromContent 这样的特殊事件。但是很少有事件可以帮助您。

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

但afterUndoImage 仅在Undo 命令时触发，不会在手动删除元素时触发。

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

CKEditor 使用execCommand（大部分）更改内容，因此会触发许多内容的更改，因此您可以使用正则表达式检查差异。

你也可以使用插件onchange来检测内容的变化，它结合了onUndo、onRedo、afterCommandExec等。

【讨论】：

【解决方案2】：

我知道这已经很老了，但是我在寻找解决方案时最终来到了这里，所以我认为值得发布另一种方法。

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

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

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

【讨论】：

【解决方案3】：

使用插件--> https://github.com/shibbirweb/ckeditor5-image-remove-event-callback-plugin

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

谢谢

附：：此代码 sn-p 来自软件包文档，这就是所有信息。

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)
        }
    },
    // ...
});

【讨论】：