如何使用react-quill为用户提供创建也可以预览的模板

Question

我正在查看一个名为 react-quill 的 npm 库，但不确定如何在 带预览功能的 HTML 代码编辑器中实现相同的功能

我需要能够允许用户输入 HTML 代码，然后在预览窗口中呈现此代码。

我是react-quill的新手，不知道如何实现这一点，因为我想为用户提供一个包含HTML代码选项的工具栏，如

h1

、

h2

、

span

等。

我已在 codesandbox 中尝试过此代码，但它显示为没有预览窗口的富文本编辑器。我实际上希望它显示为带有渲染预览的 HTML 编辑器。

我也不确定react-quill是否可以实现这一点，或者我是否应该考虑另一个库？

为了确保，我实际上想要的是这个，但相反，即允许用户输入/编辑 HTML（右屏幕）并显示此输出（左屏幕）：

https://zenoamaro.github.io/react-quill/

Answer 1

https://quilljs.com/docs/modules/toolbar/

您需要添加工具栏选项

import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],

  ["clean"] // remove formatting button
];

function HtmlEditor() {
  const [content, setContent] = useState("");

  function handleChange(value) {
    setContent(value);
  }

  return (
    <div>
      <h1>HTML Editor</h1>
      <div className="editor-container">
        <ReactQuill
          value={content}
          onChange={handleChange}
          modules={{ toolbar: toolbarOptions }}
        />
        <div
          className="preview-container"
          dangerouslySetInnerHTML={{ __html: content }}
        ></div>
      </div>
    </div>
  );
}

export default HtmlEditor;

Answer 2

https://miloudi.rf.gd/posts/how-to-use-quill-js-in-react阅读这篇文章，会对你有帮助