如何从 React Quill 导入 css？

Question

我正在使用react制作一个公告板。\nPOST编辑器使用React Quill并正常保存到服务器。\nQuill编辑器中使用的css很好地反映并保存到服务器，但是当导入并显示在屏幕上时， css 无法正常工作。\n如何导入 Quill 的 css 文件？

\n

此代码将使用 Quill 保存的 HTML 文本解析为危险的SetInnerHTML。

\n

 <div className="view" dangerouslySetInnerHTML={{ __html: data?.content }}></div>\n

\n

这段代码是我在 Quill 中编写的代码的片段。

\n

<p class="ql-align-center">\n  <img src="https://myrecord.s3.ap-northeast-2.amazonaws.com/e2c36fce-8ce0-4ae8-a188-9ca549ebe2ea.jpg">\n</p>\n<p class="ql-align-justify">\n  <span class="ql-size-huge">1\xec\xb0\xa8&nbsp;\xec\x84\xb8\xea\xb3\x84&nbsp;\xeb\x8c\x80\xec\xa0\x84\xec\x9d\x98&nbsp;\xeb\xb0\x9c\xeb\xb0\x9c\xea\xb3\xbc&nbsp;\xeb\xaf\xb8\xea\xb5\xad</span>\n</p>\n

\n

如何导入带有ql-align-center,的 css 文件ql-align-justify？

\n

Answer 1

这些 css 类可以像这样导入：

import "react-quill/dist/quill.core.css";

还有 quill.snow.css 和 quill.bubble.css，它们分别添加雪编辑器主题和气泡编辑器主题的样式。

请注意，大多数 css 类仅在位于 内时才起作用.ql-editor，因此您可能需要将代码更改为：

<div className="view ql-editor" dangerouslySetInnerHTML={{ __html: data?.content }}></div>