angularjs 禁用拖放图像quill js

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

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

xzabzqsa

xzabzqsa1#

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

  1. class ByeByeUploader {}
  2. Quill.register({
  3. "modules/uploader": ByeByeUploader
  4. }, true);

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

  1. <ReactQuill
  2. modules={{
  3. uploader: {
  4. handler: ()=>{}
  5. }
  6. }}
  7. ...

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

展开查看全部
2ic8powd

2ic8powd2#

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

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

crcmnpdw3#

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

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

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

kkih6yb8

kkih6yb84#

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

  1. quill.clipboard.addMatcher('IMG', (node, delta) => {
  2. const Delta = Quill.import('delta');
  3. return new Delta().insert('');
  4. })
  5. quill.clipboard.addMatcher('PICTURE', (node, delta) => {
  6. const Delta = Quill.import('delta');
  7. return new Delta().insert('');
  8. })

共享相关线程链接,
https://github.com/quilljs/quill/issues/1108
Remove colors when pasting on ngx quill field

64jmpszr

64jmpszr5#

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

  1. // 此处用于禁用拖拽事件
  2. window.addEventListener('dragover', function(e) {
  3. e = e || event
  4. e.preventDefault()
  5. }, false)
  6. window.addEventListener('drop', function(e) {
  7. e = e || event
  8. e.preventDefault()
  9. }, false)

相关问题