删除元素时的 CKEditor 事件？

Question

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

任何帮助将不胜感激。

Answer 1

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

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

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

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

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

您还可以使用插件 onchange 来检测内容，它结合了onUndo、onRedo、afterCommandExec等。

Answer 2

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

该插件使您能够传递自己的回调函数，当您从编辑器中删除图像时将调用该函数。我在 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)
        }
    },
    // ...
});

Answer 3

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

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

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

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