如何在Draft.js中插入/上传图像(更新实体和块)? [英] How to insert / upload image (update entity and blocks) in Draft.js?

问题描述

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

根据我的理解，我需要通过阻止 mergeBlockData .(我不确定)

现在，我正在尝试使用 mergeBlockData 插入一个块.

  mergeBlockData(contentState:ContentState，selectionState:SelectionState，blockData:映射<任何，任何>):ContentState 

请阅读代码中的注释.

 从'immutable'导入{Map};const selection = this.state.editorState.getSelection();const contentState = this.state.editorState.getCurrentContent();console.log(convertToRaw(contentState));//例如，我有3个街区const blockData = Map({ov72:{//这里如何生成随机有效密钥?"key":"ov72"，文本": " "，"type":"atomic"，深度":0，"inlineStyleRanges":[]，"entityRanges":[{偏移":0，长度":1键":1}]，数据": {}}});const newContentState = Modifier.mergeBlockData(contentState，selection，blockData);console.log(convertToRaw(newContentState));//这是错误的，仍然是3个块.原始块也没有变化const newEditorState = EditorState.push(this.state.editorState，newContentState); 

解决方案

花点时间弄清楚如何插入图像.

  insertImage =(editorState，base64)=>{const contentState = editorState.getCurrentContent();const contentStateWithEntity = contentState.createEntity('图像'，'IMMUTABLE'，{src:base64}，);const entityKey = contentStateWithEntity.getLastCreatedEntityKey();const newEditorState = EditorState.set(editorState，{currentContent:contentStateWithEntity}，);返回AtomicBlockUtils.insertAtomicBlock(newEditorState，entityKey，'');}; 

然后您可以使用

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

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

实时演示: codesandbox

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

---

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

有关如何获取base64的操作很简单，请检查

实时演示: jsbin

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

I am trying to insert image to Draft.js editor.

Based on my understanding, I need update entity by mergeData and blocks by mergeBlockData. (I am not sure)

Now I am trying to use mergeBlockData to insert a block.

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

Please read comment in the code.

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

解决方案

Took a while to figure out how to insert image.

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

Then you can use

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

For render image, you can use Draft.js image plugin.

Live demo: codesandbox

The demo inserts a Twitter logo image.

---

If you want to insert a image from local file, you can try to use FileReader API to get that base64.

For how to get base64, it is simple, check

Live demo: jsbin

Now go ahead to put them together, you can upload image from local file!

这篇关于如何在Draft.js中插入/上传图像(更新实体和块)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！