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

前言：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有一些代码我就不放出来了，因为各自都有自己的业务。

这样就不会出现报错了。