2023-04-11 使用react-draft-wysiwyg插件进行图片插入后编写文字时抛出错误：Unknown DraftEntity key: null.

标签：11 react 插件 const wysiwyg draft key props 图片

前言：react+antd+react-draft-wysiwyg文本编辑业务场景，当我点击插入图片时，在该图片上一行或下一行进行文字输入会报如下错误：

报错：Unknown DraftEntity key: null.未知的DraftEntity key：null。

原因：当你插入图片时，新的图片img需要被包裹在一个块级元素内就不会报错（这看起来并不是原因）。

解决方案（注：该方案来自http://t.csdn.cn/gnk9W）：

新建一个xxx.jsx,代码如下：

import React, { Component } from 'react';

export const myBlockRenderer = contentBlock => {
    const type = contentBlock.getType();

    // 图片类型转换为mediaComponent
    if (type === 'atomic') {
        return {
            component: Media,
            editable: false,
            props: {
                foo: 'bar',
            },
        };
    }
};

class Media extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        const { block, contentState } = this.props;
        const data = contentState.getEntity(block.getEntityAt(0)).getData();
        const emptyHtml = ' ';
        return (
            <div>
                {emptyHtml}
                <img
                    src={data.src}
                    alt={data.alt || ''}
                    style={{ height: '100%', width: '100%' }}
                />
            </div>
        );
    }
}

这个文件是原作者（http://t.csdn.cn/gnk9W）自己写的，不过他的是ts版本，我把它改成了js版本，它的作用就是把富文本里面的图片重新包装一下再返回。

然后把这个文件引入你的文本编辑器中吧，如：

import { Editor } from 'react-draft-wysiwyg'

···

<Editor     customBlockRenderFunc={xxx} // 关键业务在这一行 xxx 是你要引入的那个xxx.jsx文件     toolbar={{               previewImage: true,         defaultSize: {             height: 'auto',             width: 'auto',         },         options: [             'inline',             'blockType',             'fontSize',             'fontFamily',             'list',             'textAlign',             'colorPicker',             'link',             'embedded',             'image',             'remove',             'history',         ],         fontFamily: {             options: [                 '宋体',                 '黑体',                 '楷体',                 '微软雅黑',                 'Arial',                 'Georgia',                 'Impact',                 'Tahoma',                 'Times New Roman',                 'Verdana',             ],         },     }} />

关于Editor有一些代码我就不放出来了，因为各自都有自己的业务。

这样就不会出现报错了。

 

标签：11,react,插件,const,wysiwyg,draft,key,props,图片
From： https://www.cnblogs.com/iuniko/p/17308263.html