Can only use Quill JS editor once on page in React

1
votes

I'm using Quill JS for a rich text editor, and React-Quill on top of that. I made a custom component to wrap the main editor so that I can have a custom toolbar as demonstrated in the documentation. I need to be able to use this editor multiple time within a component, however, every instance except for the first doesn't work. It just doesn't render the editor properly and I'm not really sure why, I'm not getting any errors either.

Here is a screen shot of what is happening an d my code. The component that I made to wrap the editor component is the same as in the documentation.

...

<Form.Label className="mt-4">Goal</Form.Label>
<DGEditor value={props.recipe.goal} change={props.handleGoalChange} />

<Form.Label className="mt-4">Problem</Form.Label>
<DGEditor value={props.recipe.goal} change={props.handleProblemChange} />

<Form.Label className="mt-4">Approach</Form.Label>
<DGEditor value={props.recipe.goal} change={props.handleApproachChange} />

...

The docs: https://www.npmjs.com/package/react-quill

Codepen from the creator: https://codepen.io/alexkrolick/pen/gmroPj?editors=1010

enter image description here

1
javascriptreactjsquill

1 Answers

0
votes

It looks like you need to set this field to be different for different instances.

Editor.modules = {
  toolbar: {
    container: "#toolbar", // <-- different for different instances

This github thread shows one way to do it:

https://github.com/zenoamaro/react-quill/issues/252

And the demo they had here:

https://codepen.io/alexkrolick/pen/mMOPmv?editors=0010