如何在Froala编辑器中区分移动已有图片与插入新图片？

我正在使用带有draggable插件和imageMove: true选项的Froala富文本编辑器，可移动编辑器中已插入的图片。同时我还使用了drop事件，希望能区分移动已有图片和插入新图片这两种操作。

现有代码片段：

froala.events.on('drop', event => {
    const files = event.originalEvent.dataTransfer.files
    const isImageMove = ??? // 这里需要判断是否是移动编辑器中已有的图片
    console.log(isImageMove ? '图片已移动' : '图片已插入')
})

请问是否有实现该需求的方法？

有两种可靠的实现方式，可根据场景选择：

方式一：通过dataTransfer数据判断 #

当移动编辑器内已有图片时，dataTransfer会携带text/html类型的数据，且内容是编辑器内的图片元素（带有Froala专属类名如fr-fic）；插入新图片时则会携带Files类型数据。基于此可以区分操作：

froala.events.on('drop', event => {
    const dt = event.originalEvent.dataTransfer;
    // 检查是否是编辑器内已有图片的移动操作
    const isImageMove = dt.types.includes('text/html') && 
                        /<img[^>]+class="[^"]*fr-fic[^"]*"/.test(dt.getData('text/html'));
    
    if (isImageMove) {
        console.log('图片已移动');
    } else if (dt.types.includes('Files')) {
        console.log('图片已插入');
    }
})

方式二：利用Froala原生事件标记 #

借助Froala提供的image.beforeMove事件标记图片移动状态，在drop事件中校验标记，这种方式兼容性和准确性更高：

let isMovingImage = false;

// 监听图片移动前的事件，设置标记
froala.events.on('image.beforeMove', () => {
    isMovingImage = true;
});

froala.events.on('drop', event => {
    if (isMovingImage) {
        console.log('图片已移动');
        isMovingImage = false; // 重置标记
        return;
    }

    const files = event.originalEvent.dataTransfer.files;
    if (files.length > 0 && files[0].type.startsWith('image/')) {
        console.log('图片已插入');
    }
})

内容的提问来源于stack exchange，提问作者Michal