记一下在react中使用braft-editor富文本编辑器踩的坑

Posted 2023-02-26

参考技术A 【react】、【ts】、【braft-editor】
最近有一个需要使用富文本的需求，在网上找到了braft-editor，这是一个文档比较全面，使用灵活、简单的富文本编辑器。具体使用可以参考官方文档。
braft-editor官网：
https://braft.margox.cn/
集成Ant Design上传组件：
https://braft.margox.cn/demos/antd-upload

自己的笔记，在使用braft-editor遇到的或感觉可能别人会遇到的坑，希望能有一点帮助。

1、初始化的时候最好创建一个富文本对象，别用null代替
editorState: BraftEditor.createEditorState('<p></p>'), // 富文本对象

这里，我之前按照官网写的，用的null，在结合antd上传时，遇到了Cannot read property 'getSelection' of null的报错。

在结合源码debugger之后，发现传过去的editorState对象是空。

其原因为：由于之前editorState初始化是null，其创建是在文本改变之后，第一次在未创建editorState对象时，调用上传图片回调，此时，必然也是null，故报错。

2、braft-editor默认会将图片转为base64，不想转，需要自定义图片上传按钮
extendControls、controls都可以实现自定义按钮
上传可以用antd的upload，braft-editor官网有结合antd的upload的例子

3、使用官网例子，创建带antd upload的富文本时，出现的两个常见错误
（1）没有braft-utils、braft-finder包
这两个包需要自行安装，官网文档没提。

安装包后，我们神奇的发现，这俩包还是不能使用

原因：上面装的两个包是js的包，可以自行去装ts的包或者通过配置实现

在文件中添加：

（2）' key: string; type: string; component: Element; []' is not assignable to type 'ExtendControlType[]'

【解决方案】ts报错，在定义extendControls处，加一个：any
【修改前】

以上就是这次总结的坑。

ps：官网列子中，新增图片按钮使用了Icon组建，这个在现在项目中是没有的，自行换一个图标。