解决Unknown DraftEntity key null 插入图片,再输入会报错问题
最近在用react+draft.js编写富文本编辑器的时候遇到一个错误提示:Unknown DraftEntity key: null ,当时是写插入图片插入成功后在输入文字这一操作的时候出现的。
对比官方Demo上有一个易错的点(注意一下 其中的insertAtomicBlock函数的第三个参数不是一个空字符串,而是一个含有空格的字符串!!!!!!)
editorState: AtomicBlockUtils.insertAtomicBlock(
newEditorState,
entityKey,
' '
),
主要解决方案
自定义customBlockRenderFunc的方法
新建customBlockRenderFunc.tsx
import React, {
Component } from 'react';
interface Props {
contentState: any;
block: any;
blockProps: any;
}
interface Sate {
}
export const myBlockRenderer = (contentBlock: any): any => {
const type = contentBlock.getType();
// 图片类型转换为mediaComponent