如何用react-quill实现可预览的HTML模板创建与代码编辑功能？

react-quill完全可以实现你的需求，不需要更换其他库。默认的富文本可视化编辑不是你要的形态，只需切换到源码编辑模式，配合预览组件就能实现右侧编辑HTML、左侧渲染输出的效果。

核心实现步骤 #

1. 切换到源码编辑模式 #

React-Quill默认是可视化编辑器，需要强制它进入源码编辑模式，让用户直接输入HTML代码。通过配置modules并在编辑器初始化时设置模式为code即可实现。

2. 实时预览窗口实现 #

维护一个状态存储用户输入的HTML内容，在预览区用dangerouslySetInnerHTML渲染该内容（注意：生产环境需用DOMPurify等工具做XSS防护，避免恶意代码执行）。

3. 配置自定义HTML工具栏 #

自定义工具栏按钮，包含h1、h2、span等格式选项，这些按钮会直接插入对应的HTML标签到源码编辑器中。

完整示例代码 #

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

// 自定义工具栏配置，可按需扩展
const modules = {
  toolbar: [
    [{ header: [1, 2, false] }], // h1、h2选项
    ["bold", "italic", "underline"],
    [{ list: "ordered" }, { list: "bullet" }],
    // 自定义span按钮，点击插入span标签
    [{ 'script': 'span' }],
    ["code-block"],
    ["clean"]
  ],
  history: {
    delay: 1000,
    maxStack: 50,
    userOnly: true
  }
};

// 对应工具栏的格式列表
const formats = [
  "header",
  "bold",
  "italic",
  "underline",
  "list",
  "bullet",
  "script",
  "code-block"
];

export default function HtmlEditorWithPreview() {
  const [htmlContent, setHtmlContent] = useState("<h1>测试预览</h1><p>这是一段示例文本</p>");

  const handleChange = (value) => {
    setHtmlContent(value);
  };

  return (
    <div style={{ display: "flex", gap: "20px", padding: "20px" }}>
      {/* 左侧预览窗口 */}
      <div style={{ flex: 1, border: "1px solid #eee", padding: "15px", minHeight: "500px" }}>
        <h3>预览</h3>
        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
      </div>

      {/* 右侧HTML代码编辑器 */}
      <div style={{ flex: 1 }}>
        <h3>HTML代码编辑</h3>
        <ReactQuill
          theme="snow"
          value={htmlContent}
          onChange={handleChange}
          modules={modules}
          formats={formats}
          // 初始化时强制进入源码编辑模式
          onReady={(quill) => {
            quill.mode = "code";
          }}
          style={{ height: "500px" }}
        />
      </div>
    </div>
  );
}

关键细节说明 #

• quill.mode = "code"：这是切换到源码编辑模式的核心代码，用户输入的内容将以纯HTML文本形式展示和编辑。
• 自定义span按钮：示例中添加的script: span配置，点击后会在光标位置插入<span></span>标签，可根据需求扩展更多自定义标签。
• XSS防护：如果是面向外部用户的场景，必须对htmlContent做过滤，比如引入dompurify库，处理后再传入dangerouslySetInnerHTML。

备选方案（如需更灵活的编辑体验） #

如果后续觉得react-quill的源码模式有局限，可考虑：

• 用codemirror或monaco-editor作为纯代码编辑器，自定义工具栏按钮插入HTML标签，再配合预览组件。
• 选用专门的HTML编辑器库，但react-quill已能满足你的核心需求，优先建议基于现有代码改造。

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