1

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();    

componentDidMount = () => {
  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!

Johnny Willemsen
  • 2,942
  • 1
  • 14
  • 16
Otavio Augusto
  • 316
  • 3
  • 9
  • 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: https://github.com/zenoamaro/react-quill/issues/282 and figured out that I could do the same thing. – Otavio Augusto Feb 21 '19 at 20:10

3 Answers3

8

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

bl4ckck
  • 169
  • 2
  • 8
2

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} />
)
Aziz Becha
  • 61
  • 3
0

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

this.quillRef.current.addEventListener('keydown', null);
Matvii Hodovaniuk
  • 513
  • 7
  • 21