花了一段时间才弄清楚如何插入图像。

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

对于渲染图像，您可以使用Draft.js 图像插件。

现场演示： codesandbox

该演示插入了 Twitter 徽标图像。

如果要从本地文件插入图像，可以尝试使用FileReaderAPI 获取该 base64。

关于如何获取base64，很简单，查看

现场演示： jsbin

现在继续将它们放在一起，您可以从本地文件上传图像！

如果您使用Draft-js 图像插件，您可以按如下方式实现。

按照@Hongbo Miao 的解释获取图像的 base64。

const imagePlugin = createImagePlugin();//initialize image plugin
const base64 = 'aValidBase64String';
const newEditorState = imagePlugin.addImage(this.state.editorState, base64);
this.setState({ editorState: newEditorState });

如果你想插入一个新的 Block 那么你可能想要使用ContentBlock而不是mergeBlockData.

内容块：https : //draftjs.org/docs/api-reference-content-block.html#content

请试试这个片段。

import { genKey } from 'draft-js'

addNewBlock(editorState) {
  const text = 'Alpha';
  const block = new ContentBlock({
    key: genKey(),
    type: 'unstyled',
    text,
  });

  const contentState = editorState.getCurrentContent();
  const blockMap = contentState.getBlockMap().set(block.key, block);                   

  return EditorState.push(editorState, contentState.set('blockMap', blockMap));
}