Vue项目Quill编辑器插入文本后退格失效并报Range相关错误

问题根因 #

• 配置错误：你将Quill的键盘快捷键绑定配置错误放入了toolbarOptions工具栏配置数组中，toolbar配置仅识别编辑器功能按钮相关的配置项，无法解析键盘绑定规则，导致Quill内部选区计算逻辑异常，报错中的偏移值4294967295本质是溢出的-1，代表程序获取到了无效的选区位置。
• 插入文本后未重置光标：调用insertText插入内容后没有主动更新光标位置，进一步加剧了选区状态异常，退格删除时无法定位到正确的字符位置，所以出现残留字符删不掉的问题。

修复方案 #

1. 把键盘绑定配置从toolbarOptions中移出，放到editorOption的modules.keyboard字段下
2. 插入文本后主动将光标移动到插入内容的末尾
3. 自定义退格绑定处理完成后返回false，让Quill继续执行默认的退格逻辑，避免打断Quill内部的状态更新

修改后代码如下：

import Quill from "quill";

// 工具栏配置仅保留按钮相关内容
let toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  [{ header: 1 }, { header: 2 }],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ align: [] }],
  [{ color: [] }],
  ["clean"]
];

export default {
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: toolbarOptions,
          // 键盘绑定规则移到此处
          keyboard: {
            bindings: {
              list: {
                key: "backspace",
                format: ["list"],
                handler: function (range, context) {
                  if (range.index === 0) return false;
                  if (range.length === 0) {
                    this.quill.deleteText(range.index - 1, 1, Quill.sources.USER);
                  } else {
                    this.quill.deleteText(range, Quill.sources.USER);
                  }
                  // 返回false不阻止Quill默认退格逻辑执行
                  return false;
                },
              },
            },
          }
        },
        theme: "snow",
        placeholder: "Please enter your text...",
      },
      editor: null,
    };
  },

  methods: {
    insertText(text) {
      const range = this.editor.getSelection(true);
      if (!range) return;
      // 插入占位文本
      this.editor.insertText(range.index, text, Quill.sources.USER);
      // 插入完成后将光标移动到插入内容的末尾
      this.editor.setSelection(range.index + text.length, 0, Quill.sources.USER);
    },
  },

  mounted() {
    this.editor = new Quill("#editor", this.editorOption);
  },
};

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