react-quill设置字符限制后粘贴截断删除出现HTML乱码如何解决

问题根因 #

直接对富文本返回的HTML字符串做截断操作，会将完整的HTML标签、HTML实体（如<、"）切割为不完整的片段，Quill解析异常片段时就会出现字符错乱。后续直接删除所有HTML标签的处理，破坏了Quill富文本的底层结构，导致空格等特殊字符无法正常输入。

最优实现方案 #

核心逻辑是不直接操作HTML字符串，通过Quill原生API统计纯文本长度，超出限制时调用Quill原生方法删除超出内容，完全保留富文本结构，避免截断异常。

完整实现代码如下：

import { useState, useRef } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const MAX_LENGTH = 100; // 自定义字符上限

const RichTextEditor = () => {
  const quillRef = useRef(null);
  const [content, setContent] = useState('');

  const handleChange = (value, delta, source) => {
    // 过滤API触发的变更，避免循环触发
    if (source === 'api') {
      setContent(value);
      return;
    }

    const quillInstance = quillRef.current?.getEditor();
    if (!quillInstance) return;

    // 统计纯文本长度（包含空格、换行）
    const textLength = quillInstance.getText().length;
    if (textLength <= MAX_LENGTH) {
      setContent(value);
      return;
    }

    // 超出长度时，调用Quill原生API删除超出部分，不会破坏结构
    quillInstance.deleteText(MAX_LENGTH, textLength - MAX_LENGTH, 'api');
    setContent(quillInstance.root.innerHTML);
  };

  return (
    <ReactQuill
      ref={quillRef}
      theme="snow"
      value={content}
      onChange={handleChange}
    />
  );
};

export default RichTextEditor;

方案优势 #

• 不会破坏HTML标签和实体结构，退格、输入、粘贴等操作均不会出现异常字符
• 空格、换行、富文本格式（加粗、斜体、列表等）都可以正常使用
• 自动适配所有输入场景，无需额外处理粘贴等特殊交互

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