防止从TinyMCE内部触发拖曳事件。

Question

如何防止 dragover 事件要从编辑器中触发。ed.contentDocument 是iframe的文档对象。

tinymce.init({
  selector: 'textarea',
  plugins: ["media", "paste"],
  paste_data_images: true,
  height: 400,
  paste_enable_default_filters: true,
  init_instance_callback: (ed) => {
    ed.dom.bind(ed.contentDocument, "dragover", () => {
      console.log('dragover')
    })
  }
})

我需要的是这样的。

1. 当用户从编辑器外拖动图片时 触发事件。
2. 当用户从编辑器中拖动图片时，阻止事件发生。

我知道事件委托，但是浪费了这么多时间，我已经没有办法了。

JSBin。https:/jsbin.comdadogahedit?js,console,output。

Answer 1

把答案贴在这里，供有同样问题的人参考。解决方法很简单。幸运的是，mimetype可以通过以下方式访问 DataTransfer 对象。

所以，如果这个项目是属于 file 那我们就从外面拖，否则就是一种。string 如URL中的。

tinymce.init({
  selector: 'textarea',
  plugins: ["media", "paste"],
  paste_data_images: true,
  height: 400,
  paste_filter_drop: false,
  init_instance_callback: (ed) => {
    ed.contentDocument.addEventListener("dragenter", function(e) {
      var items = Array.from(e.dataTransfer.items);
      var allItemsFiles = items.map(item => item.kind).every(item => item === "file")

      if(allItemsFiles) {
        console.log('from outside');
        return;
      }

      console.log('from inside')
    })
  }
})