在 Draftjs 中插入媒体时未知的 DraftEntity 键

Question

我是 Draft.js 的新手，我尝试使用以下 this example 制作简单的编辑器，我的代码与示例不完全相同，但它看起来像。但是当我单击调用 makeMedia 的 audio 或 video 按钮时，出现此错误：

  Unknown DraftEntity key

这是我的编辑：

import React, { Component } from 'react'
import {Editor, EditorState, RichUtils,CompositeDecorator,AtomicBlockUtils,Entity } from 'draft-js'
import 'draft-js/dist/Draft.css';

 class MyEditor extends Component {
constructor(props) {
    super(props)
    this.state = { editorState: EditorState.createEmpty()}
    this.onChange = this.onChange.bind(this)
    this.makeMedia = this.makeMedia.bind(this)
}
onChange(editorState) {
    this.setState({ editorState })
}
makeMedia(type){
    const {editorState} = this.state;
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
        type,
        'IMMUTABLE',
        {}
    )
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const newEditorState = EditorState.set(editorState,{currentContent:contentStateWithEntity})
    this.setState({
        editorState:AtomicBlockUtils.insertAtomicBlock(
            newEditorState,
            entityKey,
            ''
        )
    })
}
render() {
    return (
        <div className="editor">
            <button onClick={()=>this.makeMedia('audio')}>audio</button>
            <button onClick={()=>this.makeMedia('video')}>video</button>
            <Editor
            blockRendererFn={mediaBlockRenderer}
                customStyleMap={colorStyleMap}
                editorState={this.state.editorState}
                onChange={this.onChange}
                ref={(element) => { this.editor = element }}
            />
        </div>
    )
}
 }
 function mediaBlockRenderer(block) {
 console.log(block.getType())
    if (block.getType() === 'atomic') {
      return {
        component: Media,
        editable: false,
      };
    }

    return null;
  }

  const Audio = (props)=>{
  return <audio controls/>
 }
const Video = (props)=>{
return <Video controls/>
 }
 const Media = (props)=>{
   let media;
   const entity = props.contentState.getEntity(
    props.block.getEntityAt(0)
   )
   const type = entity.getType();
    if(type === 'audio'){
    media = <Audio/>
   }
   else if (type === 'video'){
    media = <Video/>
  }
   return media;
}
export default MyEditor

Answer 1

我通过添加一个 space 解决了问题，所以我转换为：

editorState:AtomicBlockUtils.insertAtomicBlock(
        newEditorState,
        entityKey,
        ''
    )

到

editorState:AtomicBlockUtils.insertAtomicBlock(
        newEditorState,
        entityKey,
        ' ' //ading space here
    )

在 Draftjs 中插入媒体时未知的 DraftEntity 键

Unknown DraftEntity key when inserting media in Draftjs

draftjs