I'm trying to use ReactQuill just to show some rich text that I have, and therefore I don't want that it can receive any input or typing from the user. Reason, I have another library (ReactAce), and ReactQuill is causing a bug that when I type the 'delete' key, it made the ReactAce stops working...

Below you can see the example, that I am trying to disable the Quill instance.

quillRef = React.createRef();    

ponentDidMount = () => {
  console.log(this.quillRef.current.editor);

  this.quillRef.current.editor.enable(false);   // undefined
};

render () { 
    <ReactQuill
      readOnly
      value={info}
      ref={this.quillRef}
      modules={quillConfig}
    >
}

If you know some way to stop the ReactQuill to receive any input from the keyboard, I would be glad because I think that is causing the bug.

Thank you!

I'm trying to use ReactQuill just to show some rich text that I have, and therefore I don't want that it can receive any input or typing from the user. Reason, I have another library (ReactAce), and ReactQuill is causing a bug that when I type the 'delete' key, it made the ReactAce stops working...

Below you can see the example, that I am trying to disable the Quill instance.

quillRef = React.createRef();    

ponentDidMount = () => {
  console.log(this.quillRef.current.editor);

  this.quillRef.current.editor.enable(false);   // undefined
};

render () { 
    <ReactQuill
      readOnly
      value={info}
      ref={this.quillRef}
      modules={quillConfig}
    >
}

If you know some way to stop the ReactQuill to receive any input from the keyboard, I would be glad because I think that is causing the bug.

Thank you!

• javascript
• reactjs
• quill
• react-ace

• I don't really know what was problem that was causing the bug, but I took off the inner div and problem was solved. I saw this issue at the repo: github./zenoamaro/react-quill/issues/282 and figured out that I could do the same thing. – Otavio Augusto Commented Feb 21, 2019 at 20:10

3 Answers 3

in React Quill 1.3.5, you can add the readOnly prop as true. It will disable your editor like input tag when disabled.

You can just use the readOnly property as the following:

<ReactQuilltheme="snow" readOnly={true} />

Of course you need to make it dynamic by using useState()

const [disabled, setDisabled] = useState(true);
    
return (
    <ReactQuilltheme="snow" readOnly={disabled} />
)

You can add event listener on "keydown" and ref to ReactQuill

this.quillRef.current.addEventListener('keydown', null);