Angular中Quill编辑器选中内容替换为动态输入框ID的问题

问题核心：当你点击外部输入框ID时，Quill编辑器的焦点已经丢失，getSelection()会返回null，因此触发了User cursor is not in editor的日志。要解决这个问题，需要提前保存编辑器的选区状态，再执行替换操作。

具体解决步骤 #

• 第一步：在组件初始化阶段，监听Quill的selection-change事件，实时保存用户在编辑器内选中的选区范围
• 第二步：修改replaceSelection方法，使用提前保存的选区来执行替换逻辑，不再依赖实时获取的选区

完整代码示例 #

// 组件初始化时监听选区变化并保存
mounted() {
  this.savedRange = null;
  // 监听Quill的选区变更事件
  this.quill.on('selection-change', (range) => {
    // 仅当存在非空选中内容时保存选区
    if (range && range.length > 0) {
      this.savedRange = range;
    }
  });
},

methods: {
  replaceSelection(event) {
    // 使用预存的选区而非实时获取
    const range = this.savedRange;
    if (range) {
      const selectedText = this.quill.getText(range.index, range.length);
      console.log('选中的文本内容: ', selectedText);
      
      // 删除选中内容并插入目标文本
      this.quill.deleteText(range.index, range.length);
      const targetId = event.target.id;
      this.quill.insertText(range.index, `{{${targetId}}}`);
      
      // 替换完成后清空预存选区，避免重复触发
      this.savedRange = null;
    } else {
      console.log('未选中任何内容或选区已丢失');
    }
  }
}

补充说明 #

• selection-change事件会在用户选中内容、光标移动或焦点离开编辑器时触发，通过它可以稳定捕获有效的选中范围
• 替换完成后清空预存选区，能避免用户误触外部元素时重复执行替换操作
• 如果需要支持光标位置插入（非选中替换），可调整selection-change的判断逻辑，同时保存光标位置

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