如何从React Quill导入css？

uxh89sit 于 2023-03-05 发布在 React

关注(0)|答案(2)|浏览(255)

我正在用react做一个公告板，POST编辑器使用了React Quill，并正常保存到服务器，Quill编辑器使用的css很好的反映并保存到服务器，但是导入并显示在屏幕上时，css不能正常工作，如何导入Quill的css文件？
此代码解析使用Quill保存为dangerouslySetInnerHTML的HTML文本。

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

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

<p class="ql-align-center">
  <img src="https://myrecord.s3.ap-northeast-2.amazonaws.com/e2c36fce-8ce0-4ae8-a188-9ca549ebe2ea.jpg">
</p>
<p class="ql-align-justify">
  <span class="ql-size-huge">1차&nbsp;세계&nbsp;대전의&nbsp;발발과&nbsp;미국</span>
</p>

如何导入一个css文件ql-align-center，ql-align-justify？？

css

来源：https://stackoverflow.com/questions/69726804/how-to-import-css-from-react-quill

2条答案

按热度按时间

vd8tlhqk1#

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

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

还有quill.snow.css和quill.bubble.css，它们分别为snow编辑器主题和bubble编辑器主题添加了样式。
请注意，大多数css类只有在.ql-editor中才能工作，因此您可能需要将代码更改为：

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

赞(0）回复(0）举报 2023-03-05

gab6jxml2#

我在一个项目上工作，我遇到了同样的问题。我修复它的方法是使用ReactQuill提供的CDN。我会把下面的链接到页面，以及链接添加到您的html或_document.js文件。我希望这有帮助！快乐编码！
ReactQuill -链接到第https://quilljs.com/docs/quickstart/页*****如果您使用NextJS编写代码，则此页将向您显示在_document. js文件中与一起使用的链接，如果您使用ReactJS，则此页将显示在html文件中与一起使用的链接。
CDN链接：

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

赞(0）回复(0）举报 2023-03-05

我来回答

如何从React Quill导入css？

2条答案

相关问题

热门标签

最新问答