Javascript 在基于js的草稿编辑器中上载和渲染图像

我正在尝试创建一个简单的编辑器来编写故事情节。现在，我可以在编辑器中显示html标记，其中粗体文本以粗体等形式显示。我也可以将html格式的数据发送到服务器，但我无法在编辑器中显示图像，也无法在编辑器中上载图像。我已经为它创建了一个代码沙盒。这里是链接

代码行有点大。这就是为什么我在codesandbox中发布代码，在那里你也可以看到演示

---

有谁能帮我做到这一点吗

我最初发布了我的答案

为了您的方便，我复制了以下内容：

---

在检查Draft.js源代码后，花了一段时间研究如何插入图像

  insertImage = (editorState, base64) => {
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
      'image',
      'IMMUTABLE',
      { src: base64 },
    );
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const newEditorState = EditorState.set(
      editorState,
      { currentContent: contentStateWithEntity },
    );
    return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
  };

然后你可以用

const base64 = 'aValidBase64String';
const newEditorState = this.insertImage(this.state.editorState, base64);
this.setState({ editorState: newEditorState });

对于渲染图像，可以使用

现场演示：

该演示插入了一个Twitter徽标图像

---

如果要插入本地文件中的图像，可以尝试使用

FileReader

API获取该base64

要了解如何获取base64，很简单，请检查

现场演示：

现在继续把它们放在一起，你们可以从本地文件上传图片了

将uploadEnable设置为true 并调用uploadCallBack

---

您尝试了什么？我已经在沙箱中发布了。我是说您在draftjs中显示图像时做了什么？我使用了CompositedCorator。我还需要做更多的事情吗？你能帮我一下吗？我没找到。我从第三天就开始尝试了