如何通过quil图像上传模块将图像上传到Quill富文本编辑器

Question

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

从console.log中，我发现该图像停留在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>
);
}