Question

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

非常感谢任何帮助。

Answer 1

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

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

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

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

CKEditor使用execCommand（大部分）更改内容，以便触发许多内容的更改，因此您可以使用regex检查diff。例如。

此外，您可以使用插件onchange来检测内容的更改，它会合并onUndo，onRedo，afterCommandExec等。

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

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

Answer 3

使用插件--> 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)
        }
    },
    // ...
});

删除元素时的CKEditor事件？

3 个答案: