Question

我正在尝试将图像插入到Draft.js编辑器中。

根据我的理解，我需要mergeData更新实体并mergeBlockData阻止。（我不确定）

现在我尝试使用mergeBlockData插入一个块。

mergeBlockData(
  contentState: ContentState,
  selectionState: SelectionState,
  blockData: Map<any, any>
): ContentState

请阅读代码中的评论。

import { Map } from 'immutable';

const selection = this.state.editorState.getSelection();
const contentState = this.state.editorState.getCurrentContent();

console.log(convertToRaw(contentState));  // for example, I have 3 blocks

const blockData = Map({ ov72: {  // here how to generate a random valid key?
  "key": "ov72",
  "text": " ",
  "type": "atomic",
  "depth": 0,
  "inlineStyleRanges": [],
  "entityRanges": [{
    "offset": 0,
    "length": 1,
    "key": 1
  }],
  "data": {}
}});
const newContentState = Modifier.mergeBlockData(contentState, selection, blockData);

console.log(convertToRaw(newContentState));  // here is wrong, still 3 blocks. Also original blocks have no change

const newEditorState = EditorState.push(this.state.editorState, newContentState);

Answer 1

花了一些时间来弄清楚如何插入图片。

  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 image plugin。

现场演示： codesandbox

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

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

关于如何获得base64，很简单，请检查

现场演示： jsbin

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

Answer 2

如果您想插入新的阻止，那么您可能希望使用ContentBlock而不是mergeBlockData。

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

Answer 3

如果您使用的是draft-js image plugin，则可以实现以下目标。

按照@Hongbo Miao的说明获取图片的base64。

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

Answer 4

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

如何在Draft.js中插入/上传图像（更新实体和块）？

4 个答案: