Angular 13中为ngx-quill编辑器添加撤销/重做按钮的方法

1. 确认History模块的导入与注册 #

首先要确保正确导入Quill的History模块并完成注册，这是最容易遗漏的关键步骤：

import Quill from 'quill';
import { History } from 'quill/modules/history';

// 注册History模块到Quill
Quill.register('modules/history', History);

注意：这段代码要放在组件初始化逻辑之前，比如组件的import代码块之后，或者在app.module.ts里全局注册，避免模块未加载导致功能失效。

2. 检查editorConfig的核心配置 #

确保你的editorConfig中同时配置了history模块和toolbar按钮：

editorConfig = {
  modules: {
    history: {
      delay: 1000, // 可选：操作记录的延迟时间
      maxStack: 50, // 可选：最大撤销步数
      userOnly: false // 可选：是否仅记录用户手动操作
    },
    toolbar: [
      ['undo', 'redo'], // 必须在工具栏配置中添加这两个按钮
      // 其他工具栏按钮...
    ]
  }
};

注意：history模块是作为modules的子项单独配置，不是嵌套在toolbar的handlers中。

3. 自定义Toolbar Handlers的正确写法 #

如果需要自定义撤销/重做的触发逻辑，不要覆盖默认handler，而是调用Quill实例的内置方法：

editorConfig = {
  modules: {
    history: {},
    toolbar: {
      container: [['undo', 'redo']],
      handlers: {
        undo: function() {
          // 通过toolbar实例获取当前Quill编辑器实例
          const quill = this.quill;
          quill.history.undo();
        },
        redo: function() {
          const quill = this.quill;
          quill.history.redo();
        }
      }
    }
  }
};

4. 确认模板中组件的配置绑定 #

在Angular模板里，确保ngx-quill组件正确绑定了editorConfig：

<quill-editor [modules]="editorConfig" [(ngModel)]="editorContent"></quill-editor>

注意：不要遗漏[modules]属性绑定，否则你的配置不会被编辑器加载。

5. 检查依赖版本兼容性 #

Angular 13需要匹配对应版本的ngx-quill和Quill，版本不匹配会导致功能异常。建议在package.json中使用以下兼容版本：

"dependencies": {
  "quill": "^1.3.7",
  "ngx-quill": "^16.0.0"
}

6. 调试验证History模块是否加载 #

可以通过获取Quill实例来检查history模块是否成功加载：

import { ViewChild } from '@angular/core';
import { QuillEditorComponent } from 'ngx-quill';

export class YourEditorComponent {
  @ViewChild(QuillEditorComponent) editor!: QuillEditorComponent;

  ngAfterViewInit() {
    // 打印编辑器的modules列表，确认history存在
    console.log(this.editor.quillEditor?.modules);
    // 手动触发undo测试功能
    this.editor.quillEditor?.history.undo();
  }
}

内容的提问来源于stack exchange，提问作者Victor Cubas