ngx-quill粘贴时滚动跳顶部，自定义Paste模块实现方案求助

核心实现思路 #

通过继承Quill原生的paste模块，重写onPaste方法，在粘贴操作前后分别保存和恢复编辑器容器的滚动位置，同时保留原生的图片粘贴等所有默认粘贴逻辑，无需额外依赖。

具体实现步骤 #

1. 创建自定义Paste模块
   继承Quill原生的paste模块，在onPaste方法中添加滚动位置的保存与恢复逻辑，同时调用原生方法保留原有功能。

2. 注册自定义模块
   在Quill编辑器初始化前，将自定义模块注册覆盖原生的paste模块。

代码示例 #

1. 自定义Paste模块实现

import Quill from 'quill';

// 导入原生paste模块
const NativePasteModule = Quill.import('modules/paste');

// 自定义粘贴处理类，继承原生模块
class CustomPasteHandler extends NativePasteModule {
  onPaste(event: ClipboardEvent) {
    // 保存粘贴前的滚动位置
    const scrollContainer = this.quill.root.parentElement;
    const originalScrollTop = scrollContainer?.scrollTop || 0;

    // 调用原生onPaste方法，保留图片粘贴、文本格式化等所有原生功能
    super.onPaste(event);

    // DOM更新完成后恢复滚动位置
    setTimeout(() => {
      if (scrollContainer) {
        scrollContainer.scrollTop = originalScrollTop;
      }
    }, 0);
  }
}

// 注册并覆盖原生paste模块，第三个参数true表示强制覆盖
Quill.register('modules/paste', CustomPasteHandler, true);

2. 在Angular组件中使用

确保在编辑器初始化前完成模块注册，比如在组件的ngOnInit中：

import { Component, OnInit } from '@angular/core';
import Quill from 'quill';

@Component({
  selector: 'app-my-editor',
  template: `
    <quill-editor 
      [modules]="quillModules" 
      [(ngModel)]="editorContent"
      style="height: 400px; overflow-y: auto;"
    ></quill-editor>
  `
})
export class MyEditorComponent implements OnInit {
  editorContent = '';
  quillModules = {
    // 可添加其他模块配置（如toolbar等）
  };

  ngOnInit(): void {
    // 注册自定义paste模块
    const NativePasteModule = Quill.import('modules/paste');
    class CustomPasteHandler extends NativePasteModule {
      onPaste(event: ClipboardEvent) {
        const scrollContainer = this.quill.root.parentElement;
        const originalScrollTop = scrollContainer?.scrollTop || 0;

        super.onPaste(event);

        setTimeout(() => {
          if (scrollContainer) {
            scrollContainer.scrollTop = originalScrollTop;
          }
        }, 0);
      }
    }

    Quill.register('modules/paste', CustomPasteHandler, true);
  }
}

关键注意事项 #

• 注册时机：必须在Quill编辑器实例化前完成模块注册，否则原生模块已经加载，覆盖不会生效。
• DOM更新延迟：使用setTimeout是因为粘贴操作会触发Quill的DOM更新，需要等待渲染完成后再恢复滚动位置，确保滚动条准确定位。
• 原生功能保留：通过调用super.onPaste(event)，完全保留了Quill原生的粘贴逻辑，包括图片粘贴、文本样式保留、链接处理等，不会丢失原有功能。
• 滚动容器定位：this.quill.root.parentElement是编辑器的滚动容器，若你的编辑器滚动容器结构不同，需根据实际DOM结构调整获取方式。

参考思路来源 #

• 分析Quill模块扩展机制：通过Quill.register覆盖内置模块是官方支持的扩展方式，核心是继承原有模块并重写目标方法。
• 参考第三方修复逻辑：ngx-quill-paste的核心思路是拦截粘贴事件处理滚动，但缺失图片功能，因此我们通过保留原生逻辑的方式解决问题。

内容的提问来源于stack exchange，提问作者Indrajith Vinod Nair