如何为QuillJS添加自定义拼写检查功能？

要实现自定义词典控制的拼写检查，同时做到不干扰编辑体验，核心是利用Quill的Delta API、事件监听机制，结合自定义格式来标记错误内容。以下是可落地的实现方案：

1. 基础拼写检查与错误标记 #

通过监听Quill的text-change事件，在内容更新时扫描文本、匹配自定义词典，再用自定义格式标记错误单词。

代码实现 #

const quill = new Quill('#editor', {
  theme: 'snow'
});

// 自定义允许的单词词典
const allowedWords = new Set(['quill', 'editor', 'spellcheck', 'custom', 'dictionary']);

// 分词并检查拼写错误
function detectMisspellings(text) {
  // 按单词边界拆分，过滤非字母内容
  const words = text.split(/\b/).filter(token => /[a-zA-Z]/.test(token));
  const misspellings = [];
  
  words.forEach(word => {
    const lowerWord = word.toLowerCase();
    if (!allowedWords.has(lowerWord)) {
      const index = text.indexOf(word);
      misspellings.push({
        start: index,
        length: word.length,
        word: word
      });
    }
  });
  
  return misspellings;
}

// 监听文本变化，执行拼写检查
quill.on('text-change', () => {
  // 清除之前的错误标记
  quill.formatText(0, quill.getLength(), 'spell-error', false);
  
  const fullText = quill.getText();
  const errors = detectMisspellings(fullText);
  
  // 批量标记错误单词
  errors.forEach(err => {
    quill.formatText(err.start, err.length, 'spell-error', true);
  });
});

错误高亮样式 #

在CSS中定义spell-error格式的视觉效果，确保不影响正常编辑：

.ql-editor .ql-spell-error {
  text-decoration: underline wavy #ff4444;
  background-color: rgba(255, 68, 68, 0.08);
}

2. 添加纠错Tooltip（提升体验） #

通过监听selection-change事件，当用户选中错误单词时，弹出包含建议的Tooltip，点击即可替换错误内容。

代码实现 #

let activeTooltip = null;

quill.on('selection-change', (range) => {
  // 移除旧Tooltip
  if (activeTooltip) {
    activeTooltip.remove();
    activeTooltip = null;
  }
  
  if (!range || range.length === 0) return;
  
  // 检查选中内容是否带有错误标记
  const appliedFormat = quill.getFormat(range.index, range.length);
  if (appliedFormat['spell-error']) {
    const selectedWord = quill.getText(range.index, range.length);
    const suggestions = getCorrectionSuggestions(selectedWord);
    
    // 创建Tooltip元素
    activeTooltip = document.createElement('div');
    activeTooltip.className = 'spell-correction-tooltip';
    activeTooltip.innerHTML = suggestions.map(suggestion => 
      `<span class="suggestion-option">${suggestion}</span>`
    ).join('');
    
    // 定位Tooltip到选中单词上方
    const wordBounds = quill.getBounds(range.index, range.length);
    activeTooltip.style.left = `${wordBounds.left}px`;
    activeTooltip.style.top = `${wordBounds.top - 32}px`;
    
    document.body.appendChild(activeTooltip);
    
    // 绑定替换事件
    activeTooltip.querySelectorAll('.suggestion-option').forEach(option => {
      option.addEventListener('click', () => {
        quill.deleteText(range.index, range.length);
        quill.insertText(range.index, option.textContent);
        activeTooltip.remove();
      });
    });
  }
});

// 生成纠错建议（示例：匹配词典中首字母相同的单词）
function getCorrectionSuggestions(word) {
  const firstChar = word[0].toLowerCase();
  return Array.from(allowedWords).filter(w => w.startsWith(firstChar));
}

Tooltip样式 #

.spell-correction-tooltip {
  position: absolute;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
}

.suggestion-option {
  cursor: pointer;
  padding: 2px 6px;
  margin: 0 2px;
  display: inline-block;
  border-radius: 3px;
}

.suggestion-option:hover {
  background-color: #f5f5f5;
}

3. 优化编辑体验的关键细节 #

• 异步检查：如果词典很大或需要调用后端接口，将拼写检查逻辑放在setTimeout或异步函数中，避免阻塞编辑器响应。
• 批量更新：每次检查先清除所有错误标记再批量添加，减少Quill的重绘次数，提升流畅度。
• 编辑状态忽略：在用户选中文本进行格式设置时，暂时停止拼写检查，避免格式冲突。

替代方案：集成轻量拼写库 #

如果不想从头实现检查逻辑，可以用spellchecker-js这类轻量库，它支持自定义词典、编辑距离计算生成建议，直接替换上述的detectMisspellings和getCorrectionSuggestions函数即可。

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