526互联

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

发布时间 2023-04-11 23:25:13作者: 哎呦你可棒棒了

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


这样就不会出现报错了。