There is no doubt that Quill is an amazing NPM rich text editor packed. But still, I had to face the same issue as below. Maybe you also face similar things.
- React Quill blockquote was not working when it was saved as a blockquote tag in the database.
- Adding CSS file, but No font is not working after saving.
- React Quill does not alight text on center, even after rechecking the module and option props.
And many more problems I have. The possible reason for those problems is you are adding CSS files on your admin module. But dude, the thing about it is you are checking its preview on the client (frontend) module where you do not add any React related CSS. Hei, don’t get first. Don’t add thousands of lines of CSS after hearing that. Just add a couple of lines of code on your CSS from the frontend or client part. All codes are given below.
Solve react Quill related issues
Here are all those codes. Just add
those with your style.css or any CSS file on both of admin and user modules. Even
if you are good and creative in CSS writing, then you can modify those and make
something creative.
.ql-align-center{
text-align: center !important;
}
.ql-align-right{
text-align: right !important;
}
.ql-align-left{
text-align: left !important;
}
blockquote {
background: rgba(7, 234, 255, 0.16);
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
.ql-font-serif{
font-family: serif !important;
}
.ql-font-monospace{
font-family: monospace;
}
Most of the time, people are going
to import Quill CSS from the node module folder, which is a regular practice. But
I wouldn’t say I like it cause it imports all the unnecessary CSS, which makes
the website heavier.
I hope you already have your
desired solution. Still, if things are get solved, then let us know in the
comment section. Soon we will feature a new solution depending on your problem.