1

I am making a bulletin board using react. The POST editor used React Quill and saved it to the server normally. The css used in Quill editor was reflected and saved to the server well, but when imported and displayed on the screen, the css does not work properly. How can I import Quill's css file?

This code is parsing HTML text saved with Quill as dangerouslySetInnerHTML.

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

This code is a snippet from the code I wrote in 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>

How can I import a css file with ql-align-center, ql-align-justify??

2 Answers 2

4

Those css classes can be imported like this:

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

There's also quill.snow.css and quill.bubble.css, which add in styles for the snow editor theme and bubble editor theme respectively.

Be aware that most of the css classes only work if they're inside a .ql-editor, so you will probably need to change your code to:

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

I was working on a project and I ran into the same problem. The way that I fixed it is used the CDN provided by ReactQuill. I'll put the link below to the page as well as the link to add to your html or _document.js file. I hope this helps! Happy coding!

ReactQuill - link to page https://quilljs.com/docs/quickstart/ *****this page will show you the link to use with in your _document.js file if you're coding in NextJS, or with in your html file if you're using ReactJS.

CDN Link:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.