禁用拖放图像Quill JS

Question

如何禁用Quill JS（Angular NG QUILL）的拖放功能，而不禁用图像格式？

查看屏幕截图：

- Ke Vin

---

Quill的选项：https://quilljs.com/docs/configuration/ - 注意格式选项。除此之外，我没有看到其他可用于禁用拖放的选项。 - undefined

@RyanC 真是太糟糕了，我想我会选择使用 Froala 编辑器。 - undefined

Answer 1

一种做法是将编辑器包裹在一个 div 中，并阻止默认的拖放事件。以下是一个示例...

<div onDrop={(e) => e.preventDefault()}>
  <ReactQuill {...props}/> //Your editor component
</div>

- Joel Jaimon

Answer 2

除了(dragover)="false"之外，您还可以在 onEditorCreated(quill) 事件处理程序中添加以下代码以禁用图像的复制粘贴。

quill.clipboard.addMatcher('IMG', (node, delta) => {
       const Delta = Quill.import('delta');
       return new Delta().insert('');
})
quill.clipboard.addMatcher('PICTURE', (node, delta) => {
        const Delta = Quill.import('delta');
        return new Delta().insert('');
})

分享有关主题的链接，

https://github.com/quilljs/quill/issues/1108

在 ngx quill 字段上粘贴时去除颜色

- vivek

Answer 3

我之前也遇到了Quill编辑器的同样问题，但是我解决了这个问题。 请看我的代码：

<div id="quill-editor" (dragover)="false"></div>

所以，如果你在编辑器的div中放入(dragover)="false"，问题就会解决。

- Jin Lin

Answer 4

遇到了相同的问题，原因是默认启用了一个名为"uploader"的模块，与"react-quill-with-table"冲突。

通过覆盖它来解决：

class ByeByeUploader {}

Quill.register({
  "modules/uploader": ByeByeUploader
}, true);

另外，它似乎提供了一个可以被覆盖以不执行任何操作的“handler”选项。

<ReactQuill
  modules={{
    uploader: {
      handler: ()=>{}
    }
  }}
...

最后，如果您的问题不是来自于这个模块，我建议在Quill容器DIV上设置一个DOM断点，以便对子树修改有更好的理解。

- user5480949

Answer 5

禁用默认的图像行为，使用以下HTML和JavaScript代码。

$('img').on('dragstart', function(event) { event.preventDefault(); });

- ashik ck

Answer 6

这是一个浏览器的行为。Quill对此无能为力。

// 此处用于禁用拖拽事件
window.addEventListener('dragover', function(e) {
  e = e || event
  e.preventDefault()
}, false)
window.addEventListener('drop', function(e) {
  e = e || event
  e.preventDefault()
}, false)

- Peter Pan

---

这是一个浏览器的行为。 - undefined