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

解决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
	
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值