A Quill component for React.
react-quill is a plugin that creates components for the quill text editor for use with Facebook's reactjs library.
Resources
Github repository
QuillJS
Questions tagged [react-quill]
239 questions
0
votes
0 answers
how can i set default text alignment in react-quill to right?
I want the default text-align to be right in react quill, i couldn't find a way to do that.
Here is my text editor:
import dynamic from 'next/dynamic'
import { ReactQuillProps } from 'react-quill'
import 'react-quill/dist/quill.snow.css'
const…
Samyar
- 387
- 3
- 15
0
votes
0 answers
How to show error text in tooltip Quill Editor
The quill interface has the ability to add an iframe, how to show the error text in the tooltip for entering a link if the url is invalid?
let Video = Quill.import('formats/video');
Video.sanitize = function validateVideoLink(value){
if…
fisher
- 83
- 6
0
votes
0 answers
how to upload images using refs(in react) in multiple input tags using react quill
Using ref I am getting only one image uploaded in an input, but I want different images in all input fields.
enter image description here
` setInstructions(e)}
…
Sandhya
- 1
0
votes
1 answer
ReferenceError: document is not defined in NextJs when refresh page
got error ReferenceError: document is not defined when try refresh-page
I try to make some component with react-quill and call that component in a page
my component :
import React, { useState } from 'react'
import ReactQuill from…
judith herlambang
- 43
- 1
- 5
0
votes
0 answers
Get document is not defined when import 'ui/icons' from React Quill library using NextJS
Everything was fine until I imported Quill.import('ui/icons') to override the default icons of the library. It returns "document is not defined". Is there any way to fix this?
import { Stack } from '@mui/material'
import * as React from…
Quân Phùng
- 1
- 1
0
votes
0 answers
How to use dir='auto' with react quill?
I have a react quill editor, and i want it to start typing from right if it's Arabic, the attribute dir='auto' is working great with or but my question is there a way for react quill editor to act the same?
ReactQuill Editor:
…
sultan.h
- 331
- 1
- 4
- 16
0
votes
0 answers
How to display contents of React-quilljs text editor?
i'm using next JS 13 and created a rich-text editor using react-quilljs package. so far i've created a quill text-area and custom toolbar. when i console log the deltas it returns it with Array. but how can i post and display the delta into readable…
Mohammed Bekele
- 727
- 1
- 9
- 25
0
votes
0 answers
addRange(): The given range isn't in document Quill warning
I'm using react-quill library, the editor is working fine, I added undo redo buttons to the editor and still working fine, but when I passed props {onChange, defaultValue} , I get this warning:
addRange(): The given range isn't in…
sultan.h
- 331
- 1
- 4
- 16
0
votes
1 answer
How to add a color picker to React Quill toolbar
I want to use react-quill for my react rich text editor but I couldn't find a way to add a color picker in the toolbar.
I'm also using typescript.
here is my component:
const modules = {
toolbar: [
[{ font: ['', 'times-new-roman', 'arial']…
fatemeh zamanipour
- 55
- 1
- 12
0
votes
0 answers
Load protected (Authorization header) images using QuillJs
It's pretty easy to upload the images to the server but what I want is to load the images from the server on the browser but as the images are protected using JWT access control the backend is throwing Access Denied error.
Is there any way by which…
Rushabh Dangore
- 11
- 4
0
votes
0 answers
react quill not loading on server
My application is built on next js and quill works fine on localhost but on hosting server it does not load first time unless i refresh/reload the page.
import React, { useState, useEffect, useRef } from "react";
import dynamic from…
sam
- 21
- 3
0
votes
2 answers
quillRef.getSelection is not a function
I am trying to insert some dummy text at the current cursor position in the quill react package. But I get the following error in the console:
quillRef.getSelection is not a function
Here is the code:
import ReactQuill from "react-quill";
import…
Moaz Ali
- 53
- 5
0
votes
0 answers
QuillJS: The toggle feature of inline blot buttons are not working when in fullscreen mode
I am using QuillJS 1.3. Since QuillJS natively doesn't provide / support full-screen mode / feature in toolbar, I created one and handled the full-screen logic from outside. Following is the code (I am using ReactJS):
useEffect(() => {
const…
Aman Gupta
- 5,548
- 10
- 52
- 88
0
votes
0 answers
React quill toolbar issue
I my using react quill to create journal in website. we also created app for android and ios. now when i indent on right side form web then it won't show on phone and vice versa.
any solution for this problem.
i try to replace react-quill class with…
0
votes
1 answer
Why does react quill mentions not showing?
I have created a component for RichText with ReactQuill and i am implementing mentions but when i type @ in textbox mentions not working i tried puting dependency in useMemo but the textbox disapears
How can i make this code work so when i type @ it…
aarriiaann
- 56
- 8