quill富文本编辑器监听复制粘贴清除格式（防止粘贴滚动条回到顶部、网页抖动）

quill中文文档https://www.kancloud.cn/liuwave/quill/1409382

quill英文文档https://quilljs.com/

一、需求

1、保留图片跟空格

2、清除其余所以样式

真的是太开心的了在网上各种百度搜索终于找到了一个方法，

文档没有详细说明

下面看例子吧

quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
  delta.ops = delta.ops.map(op => {
    return {
      insert: op.insert
    }
  })
  return delta
})

试试会得到你想要的效果

二：如果你只是想保留纯文本

看一下试试如下效果

quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
  let ops = []
      delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') {
          ops.push({
            insert: op.insert
          })
        }
      })
      delta.ops = ops
      return delta
})

三：自定义粘贴清除格式功能（防止粘贴滚动条回到顶部、网页抖动）

// 阻止粘贴行为导致的滚动条跳动
class CustomClipboard extends Clipboard {
  onPaste(e) {
 
    const top = window.pageYOffset;
    const left = window.pageXOffset;
    if (e.defaultPrevented || !this.quill.isEnabled()) return;
    let range = this.quill.getSelection();
    let delta = new Delta().retain(range.index);
    this.container.style.top =
     (
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop ||
      0
     ).toString() + "px";
    this.container.focus();
    setTimeout(() => {
      this.quill.selection.update(Quill.sources.SILENT);
      let convertData = this.convert();
      
     delta = delta.concat(convertData).delete(range.length);
     this.quill.updateContents(delta, Quill.sources.USER);
     this.quill.setSelection(
      delta.length() - range.length,
      Quill.sources.SILENT
     );
     let bounds = this.quill.getBounds(
      delta.length() - range.length,
      Quill.sources.SILENT
     );
     this.quill.scrollingContainer.scrollTop = bounds.top;

     // scroll window to previous position after paste
     window.scrollTo({ top, left });
    }, 1);

  }
}

遗漏重点代码

 //循环出去文本，格式化重点

            convertData.ops = convertData.ops.map((op) => {

                return {

                    insert: op.insert,

                };

            });

---------------------------------更新修复-----------------分割线---------------------------------------------

vue中如何使用第三种方式：

安装版本：npm install quill

相关代码

import Quill from 'quill'
const Clipboard = Quill.import("modules/clipboard");
import Delta from 'quill-delta';

// 阻止粘贴行为导致的滚动条跳动
class CustomClipboard extends Clipboard {
    onPaste(e) {

        const top = window.pageYOffset;
        const left = window.pageXOffset;
        if (e.defaultPrevented || !this.quill.isEnabled()) return;
        let range = this.quill.getSelection();
        let delta = new Delta().retain(range.index);
        this.container.style.top =
            (
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop ||
                0
            ).toString() + "px";
        this.container.focus();
        setTimeout(() => {
            this.quill.selection.update(Quill.sources.SILENT);
            let convertData = this.convert();
            //循环出去文本，格式化重点
            convertData.ops = convertData.ops.map((op) => {
                return {
                    insert: op.insert,
                };
            });

            delta = delta.concat(convertData).delete(range.length);
            console.log(delta)
            this.quill.updateContents(delta, Quill.sources.USER);
            this.quill.setSelection(
                delta.length() - range.length,
                Quill.sources.SILENT
            );
            let bounds = this.quill.getBounds(
                delta.length() - range.length,
                Quill.sources.SILENT
            );
            this.quill.scrollingContainer.scrollTop = bounds.top;

            // scroll window to previous position after paste
            window.scrollTo({ top, left });
        }, 1);

    }
}

//此处需要注册
Quill.register("modules/clipboard", CustomClipboard, true);