Next.js中导入Quill报错，如何为Quill编辑器添加HR标签？

你直接通过拼接HTML修改htmlContent的方式会和Quill的内部状态管理冲突，这是引发错误的核心原因。Quill基于Delta格式管理内容，正确的做法是通过Quill的API操作内容，同时需要先注册分割线对应的Blot类型——因为Quill默认不支持hr格式。

修正步骤及代码： #

1. 注册HR Blot：为分割线定义自定义Blot，让Quill能识别并处理这个格式
2. 正确配置工具栏处理器：使用Quill的官方API插入分割线，而非直接修改HTML状态
3. 调整内容变更逻辑：保持Quill内部状态与组件state同步的正确方式

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

// 注册自定义HR Blot
const Block = Quill.import('blots/block');
class HrBlot extends Block {
  static blotName = 'hr';
  static tagName = 'HR';

  static create(value: any) {
    const node = super.create(value);
    node.setAttribute('contenteditable', 'false');
    return node;
  }
}
Quill.register(HrBlot, true);

const QuillEditor = () => {
  const [htmlContent, setHtmlContent] = useState('');
  const quillRef = useRef<ReactQuill>(null);

  const modules = useMemo(
    () => ({
      toolbar: {
        container: [
          // 这里可添加其他工具栏按钮，比如 ['bold', 'italic']
          ['hr'] // 将分割线按钮加入工具栏
        ],
        handlers: {
          hr: () => {
            const quillInstance = quillRef.current?.getEditor();
            if (quillInstance) {
              const range = quillInstance.getSelection();
              if (range) {
                // 用Quill API插入分割线
                quillInstance.insertEmbed(range.index, 'hr', true);
                // 插入后将光标移到分割线下方
                quillInstance.setSelection(range.index + 1);
              }
            }
          },
        },
      },
    }),
    []
  );

  const formats = [
    // 其他需要的格式，比如 'bold', 'italic'
    'hr'
  ];

  return (           
    <ReactQuill
      ref={quillRef}
      theme="snow"
      modules={modules}
      formats={formats}
      value={htmlContent}
      onChange={(content, delta, source, editor) => {
        setHtmlContent(editor.getHTML());
      }}
    />
  );
};

export default QuillEditor;

关键说明： #

• 自定义HrBlot继承自Block类型，设置contenteditable="false"避免用户误编辑分割线本身
• 工具栏处理器中通过getEditor()获取Quill实例，用insertEmbed方法插入分割线，这是符合Quill设计逻辑的操作方式
• 避免直接修改htmlContent，而是通过Quill的API操作内容，再通过onChange同步到组件state，保证内部状态一致

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