时间戳

首页 > 解决方案 > Quill Js 在我的内容主体中不起作用

javascript - Quill Js 在我的内容主体中不起作用

问题描述

我正在将 Quill Js 用于我的博客内容的富编辑器，当我在我的富编辑器 textaria 中进行编辑时，我可以看到工作成功，但是当我发布我的博客时，内容上什么也没发生，只是发布一个平面文本，我没有不知道为什么！

我在用着next js

我已经尝试过这种方式。

_document.js文件

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="URF-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
          <link
            href="https://cdn.quilljs.com/1.0.0/quill.snow.css"
            rel="stylesheet"
          ></link>
          <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
          <link
            href="//cdn.quilljs.com/1.3.6/quill.core.css"
            rel="stylesheet"
          ></link>
        </Head>
        <body>

        </body>
      </Html>
    );
  }
}

export default MyDocument;

我已经导入了那些库

然后我尝试了这样的代码：

BlogCreate.js文件

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

<div className="form-group">
                <ReactQuill
                  modules={BlogCreate.modules}
                  formats={BlogCreate.formats}
                  value={body}
                  placeholder="Write something amazing..."
                  onChange={handleBody}
                />
              </div>

我已经进口了一些modules和formats

通过这种方式：

BlogCreate.modules = {
  toolbar: [
    [{ header: "1" }, { header: "2" }, { header: [3, 4, 5, 6] }, { font: [] }],
    [{ size: [] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
    ],
    [{ align: [] }],
    ["link", "image", "video"],
    ["clean"],
    ["code-block"],
  ],
};

BlogCreate.formats = [
  "header",
  "font",
  "size",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "link",
  "image",
  "video",
  "code-block",
];

请有任何建议。

标签： javascriptreactjsnext.js

解决方案

推荐阅读