如何通过q​​uil-image-uploader模块上传图片到Quill富文本编辑器

Question

我在尝试将图像上传到 quil-react via quil-image-uploader 时遇到问题。出于某种原因，如果您将编辑器与受控的 React 组件一起使用，并通过 react-quill 的 onChange 函数更新值，则会出现问题。

来自 console.logs 我认为图像卡在 base64 表示上，然后没有到达被删除的下一步，并作为 img 标签重新插入。

这是 code sandbox

的分叉版本

如果您尝试上传图片，将无法正常工作。

非常感谢您的帮助！ 如果我完全遗漏了一些明显的东西，请指出这个可怜的灵魂，哈哈:)

Answer 1

您在 ReactQuill 中放置了一个 div，这导致了问题。 这样做：

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