CODEWITHSUNDEEP
javascriptreactjsrich-text-editorquill
Evgeny Kasian
Evgeny Kasian

Reputation: 13

How to upload an image to Quill rich text editor via quil-image-uploader module

I have encountered an issue while trying to upload an image to quil-react via quil-image-uploader. For some reason if you use the editor with a controlled react component and update the value via onChange function of react-quill, something brakes.

From console.logs I figured that the image gets stuck on base64 representation and then does not reach the next step of being deleted, and re-inserted as an img tag.

Here is a forked version of code sandbox

If you try to upload the image it will not work.

Thanks so much for your help! If I am totally missing something obvious please point this poor soul towards it, haha :)

Upvotes: 1

Views: 3332

Answers (1)

Muhammad Ali
Muhammad Ali

Reputation: 695

You are placing a div inside ReactQuill which is causing problem. Do it like this:

    render() {
    return (
      <div>
        <ReactQuill
          theme="snow"
          modules={this.modules}
          formats={this.formats}
          value={this.state.text}
          onChange={(content) => {
            this.setState({ text: content });
            console.log(content);
          }}
        />
      </div>
    );
  }

Upvotes: 1

Related Questions