angularjs 禁用拖放图像quill js

cwxwcias  于 2022-10-31  发布在  Angular
关注(0)|答案(5)|浏览(311)

你能告诉我如何禁用羽毛笔js(angular NG QUILL)的拖放而不禁用格式图像吗
查看屏幕:

xzabzqsa

xzabzqsa1#

使用“react-quill-with-table”时出现相同问题,原因是默认启用了名为“uploader”的模块。
通过覆盖它进行修复:

class ByeByeUploader {}

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

或者,它似乎提供了一个“handler”选项,可以覆盖该选项而不执行任何操作:

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

最后,如果您的问题不是来自本模块,我建议您在quill容器DIV上设置一个DOM断点,用于修改子树,以便更好地理解

2ic8powd

2ic8powd2#

实现此目的的一种方法是将编辑器 Package 在div中,并防止drop事件的默认特性。
这里有一个例子...

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

crcmnpdw3#

我在使用Quill编辑器时也遇到了同样的问题,但我已经修复了这个问题。请看我的代码:

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

所以如果你把(dragover)="false"放到你的编辑器div中,这个问题就解决了。

kkih6yb8

kkih6yb84#

沿着(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
Remove colors when pasting on ngx quill field

64jmpszr

64jmpszr5#

这是浏览器行为。Quill对此不做任何处理。

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

相关问题