防止从 TinyMCE 内部触发 dragover 事件

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')
    })
  }
})

我需要的是这个：

当用户从编辑器外部拖动图片时触发该事件。
当用户从编辑器中拖动图像时阻止该事件。

我知道事件委托，但在浪费了这么多时间后我没有想法了。

JSBin: https://jsbin.com/dadogah/edit?js,console,output

Answer 1

在这里为有同样问题的人张贴答案。解决方案非常简单。幸运的是，可以通过 DataTransfer 对象访问 mimetype。

因此，如果物品属于 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')
    })
  }
})

防止从 TinyMCE 内部触发 dragover 事件

Prevent the dragover event to be triggered from inside TinyMCE

javascript

tinymce

防止从 TinyMCE 内部触发 d​​ragover 事件

Prevent the dragover event to be triggered from inside TinyMCE

javascript

tinymce

防止从 TinyMCE 内部触发 dragover 事件