如何通過 quil-image-uploader 模塊將圖像上傳到 Quill 富文本編輯器

Question

我在嘗試通過 q uil-image-uploader將圖像上傳到quil-react時遇到問題。 出於某種原因，如果您將編輯器與受控反應組件一起使用並通過 react-quill 的 onChange function 更新值，就會出現問題。

從 console.logs 我發現圖像卡在 base64 表示上，然后沒有到達被刪除的下一步，並作為 img 標簽重新插入。

這是代碼沙箱的分叉版本

如果您嘗試上傳圖像，它將無法正常工作。

非常感謝您的幫助，如果我完全遺漏了一些明顯的東西，請將這個可憐的靈魂指向它：哈哈 :)

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