解决Unknown DraftEntity key null 插入图片，再输入中文会报错问题

Markov Zheng

于 2021-12-11 10:52:09 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 网络学习日志文章标签： javascript react.js 前端

本文链接：https://blog.youkuaiyun.com/marko_zheng/article/details/121870174

解决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