React-Quill：如何阻止输入新字符时自动延续QuillJS格式？

核心思路 #

Quill默认会继承光标所在位置的格式，要解决这个问题，关键是要么在格式化目标文本后手动重置光标位置的格式状态，要么在光标进入格式化文本末尾时自动清除当前格式。

具体实现方案 #

方案1：格式化后强制重置光标格式 #

在调用formatText完成目标文本的加粗/下划线设置后，立即将光标移到格式化文本的末尾，再手动清除当前的格式状态：

// 假设已获取目标单词的index和length
editor.formatText(index, length, "bold", 'api');
// 把光标移到格式化文本的末尾
editor.setSelection(index + length, 0);
// 清除当前的bold格式
editor.format('bold', false, 'api');

这样光标在格式化文本末尾时，当前格式已被重置为无加粗，输入新内容就不会延续格式了。

方案2：监听selection-change事件动态清除格式 #

如果要处理用户手动把光标移到格式化文本末尾的情况，可以监听Quill的selection-change事件，当光标处于格式化文本末尾时自动清除当前格式：

editor.on('selection-change', function(range) {
  if (!range || range.length !== 0) return; // 只处理光标定位（无选中文本）的场景
  const pos = range.index;
  // 获取光标前一个字符所在的格式块
  const lineBlot = editor.getLine(pos);
  const charOffset = pos - lineBlot.offset();
  const blot = lineBlot.childAt(charOffset);
  // 判断是否处于bold格式的末尾
  if (blot && blot.statics.name === 'strong' && pos === blot.offset() + blot.length()) {
    // 清除当前的bold格式
    editor.format('bold', false, 'api');
  }
});

这个方案能覆盖用户手动移动光标到格式化文本末尾的场景，自动重置格式。

方案3：自定义Blot（可选） #

如果上述方案无法满足需求，自定义Blot也是可行方向。你可以创建自定义的inline blot，重写它的format方法或处理光标进入时的行为，阻止格式继承。不过这个方案相对复杂，适合需要更定制化格式规则的场景：

import Quill from 'quill';
const Inline = Quill.import('blots/inline');

class CustomBoldBlot extends Inline {
  static formats() {
    return {
      customBold: false
    };
  }

  format(name, value) {
    // 自定义格式处理逻辑，避免格式自动延续
    if (name === 'customBold' && value) {
      super.format(name, value);
    } else if (name === 'customBold') {
      this.removeFormat();
    } else {
      super.format(name, value);
    }
  }
}

CustomBoldBlot.blotName = 'customBold';
CustomBoldBlot.tagName = 'STRONG';
Quill.register(CustomBoldBlot, true);

之后用自定义的customBold格式代替默认的bold，就能更灵活地控制格式的继承行为。

总结 #

优先尝试方案1和方案2，这两个方案简单直接，能解决大部分场景的问题；如果需要更复杂的格式控制，再考虑自定义Blot的方案。

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