Tips on importing CSS from React Quill

I'm in the process of creating a interactive bulletin board with React. I successfully used React Quill for the POST editor and saved the content to the server without any issues. While the CSS styles from the Quill editor were properly reflected and saved on the server, they do not display correctly when imported and viewed on the screen. How can I import Quill's css file?

This particular piece of code parses HTML text that was saved using Quill as dangerouslySetInnerHTML.

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

The following snippet is a sampling of the code I input into 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>

Is there a way to import a css file containing styles such as ql-align-center, ql-align-justify? ?

htmlcssreactjsquillreact-quill

Answer №1

To utilize these CSS classes, you can import them in the following manner:

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

In addition to quill.core.css, there are also quill.snow.css and quill.bubble.css available, which provide styles for the snow editor theme and bubble editor theme respectively.

It's important to note that most of the CSS classes will only be effective within a .ql-editor element. Therefore, you may need to modify your code like so:

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

Answer №2

While working on a project, I encountered a similar issue. To resolve it, I utilized the CDN offered by ReactQuill. Below, you'll find the link to the page and instructions for adding it to your html or _document.js file. I hope this solution proves helpful in your coding endeavors!

ReactQuill - link to page *****this page will provide the necessary link for your _document.js file if you're using NextJS, or for your html file if you're working with ReactJS.

CDN Link:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Limiting the Display of Pages with PHP Pagination

Requesting assistance with updating the code to display full records. In my current setup, I am fetching records from a database and showcasing them in groups of 5 per page using the following code snippet: $num_rec_per_page=5; if (isset($_GET["page"])) ...

phphtmlmysql

What is preventing the page from scrolling downwards?

Here's a simple question: Why can't I scroll down the page to see the rest of the content in a div that exceeds the length of the window? This has never happened to me before, and I've tried searching for solutions with no luck. I've in ...

htmlcssbootstrap-5

Clue model cannot be overwritten once compiled due to an OverwriteModelError in Mongoose for NextJS

Currently, I am in the process of developing a straightforward web application using NextJS and am aiming to integrate Mongoose for handling my database operations. The error that is plaguing me can be seen at this link: https://i.stack.imgur.com/OA1JD.pn ...

reactjsmongoosenext.js

Styling a layout with two columns, centered with an offset

I have created a layout with two columns - one on the left and one on the right, with the left column containing two rows. However, I am looking to offset the center point of the column to the right so that the left column occupies about 60% of the space ...

htmlcss

Using createContext in React.tsx to pass the state through useState

There is a context called Transaction that accepts an object and a function as parameters. In the AppProvider component, the Transaction.Provider is returned. The following code snippet is from the GlobalState.tsx file: import { createContext, useState } f ...

javascriptreactjstypescripterror-handling

Is there a way to confirm if an element's predecessor includes a specific type?

I am working on an app where I need to determine if the element I click on, or its parent, grandparent, etc., is of a specific type (e.g. button). This is important because I want to trigger a side effect only if the clicked element does not have the desir ...

javascripthtmlreactjstypescript

Fetch data asynchronously prior to loading the DOM

Currently in the learning process and facing a hurdle concerning how to retrieve data from an async function and display it in the DOM. The issue I'm encountering is that I am receiving 'undefined' as the DOM gets rendered before the async ...

reactjsasynchronousasync-awaitnext.js

I am interested in incorporating the ability to select and scroll the window without needing to interact with the scroll bar by

Imagine a visitor wanting to highlight all the information on a webpage. They choose to start dragging their cursor towards the bottom of the window. How can we enable the webpage to smoothly scroll down as they do this? ...

javascriptreactjs

What's the deal with dynamic prop values in React?

In my React application, I am trying to set a dynamic prop value. My goal is to use the first item in an array called Fruits and concatenate it with 'prop' to create the prop value. For example: ApplesProp index.js const ApplesProp = { Name: "G ...

javascriptreactjsjsx

Having trouble triggering drag events efficiently with d3-drag on SVG elements

drawAll refers to a two-dimensional array where each drawAll[i] element represents a drawing containing all the strokes. A stroke is essentially a string representing a series of 2D points that can be utilized to generate a <path>. I am currently at ...

javascripthtmld3.jssvgdrag-and-drop

The drop-down menu vanishes mysteriously before it can be selected

I'm having trouble making my pop-up menu touchable. It keeps disappearing. I've tried a few things but nothing seems to work: - Placing the display:none above the hover didn't make a difference. - Changing the position: absolute in #navbar ...

htmlcss

Hide Details tag only on mobile view

How can I easily close the default opened <details> tag on mobile? I am working with Wordpress. Any suggestions on how to achieve this? <details open> <summary>Details</summary> Something small enough to go unnoticed. </ ...

javascripthtmlcsswordpress

I was surprised by how Await behaved in if-else statements, it was not what

let metadata = []; allNFTs.map(async (e) => { if (e.metadata) { metadata.push(JSON.parse(e.metadata).attributes); } else { let config = { method: "get", url: `http://localhost:3000/api/fetch ...

javascriptnode.jsreactjsaxiosnext.js

Tips on setting the ajax parameter contentType to "html"

I'm encountering an issue where the variable "myvariable" is passing as null. Can anyone provide guidance on what I might be doing incorrectly? $.ajax({ type: "POST", url: "/MyController/MyAction", data: JSON.stringify({ items: my ...

jqueryhtmlajax

Dealing with undefined URL errors

My frontend log is crowded with these errors. Whenever I visit an undefined address, my terminal in VSCode displays the following error messages. The real issue is that I am unsure how to effectively manage errors arising from hitting an undefined URL. For ...

javascriptreactjserror-handlingroutes

Having trouble with Python Bottle <br /> not functioning properly?

I encountered a perplexing issue and I am unsure of how to resolve it: There is a text area where users can input their text. For example, let's say the following is entered : This is the user's text After storing this in my database and ret ...

pythonhtmlcssbottle

Issue: Invariant violation occurred when attempting to retrieve a frame for an index that is out of range (NaN) in react-native-ios while using the

enter image description hereAttempting to showcase a blog content in react-native utilizing the fetch-api. I am finding myself lost in the syntax, as it is getting more complicated with the examples I find online. The API was generated locally from PHP-PDO ...

iosreactjsreact-nativefetch-api

The CSS properties defined on the :root selector in Nuxt cannot be located

In my Nuxt 2 app, I am attempting to create a component that includes a <style> tag with CSS properties for styling. My aim is to set default CSS properties within the component that can then be overridden externally. However, I have encountered an ...

cssvue.jsvuejs2nuxt.js

Navigating with React and MUI on Mobile Devices

I discovered a helpful tutorial on setting up navigation using Drawer on YouTube, and I have created a code sandbox with the implementation here: https://codesandbox.io/s/musing-hofstadter-rj4vn?file=/src/App.js My goal is to maintain a two-pane design fo ...

reactjsmaterial-ui

Trouble with Scroll Snap and Navbar Toggle Malfunctioning on Browser Resize

I've run into a problem with scroll snap on my website. Every time the screen size changes, like when the mobile browser's navbar is opened or closed, the scroll snap behavior goes haywire. Even after returning to the top of the page, the snap fe ...

javascripthtmlcssnavbarscroll-snap