【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的报错。
image.png
在结合源码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包
这两个包需要自行安装，官网文档没提。
npm i braft-utils --save
npm install braft-finder --save
安装包后，我们神奇的发现，这俩包还是不能使用
image.png
原因：上面装的两个包是js的包，可以自行去装ts的包或者通过配置实现
react配置：在src下，创建或修改react-app-env.d.ts文件
image.png
在文件中添加：
declare module 'braft-utils'
declare module 'braft-finder'
（2）'{ key: string; type: string; component: Element; }[]' is not assignable to type 'ExtendControlType[]'
image.png
【解决方案】ts报错，在定义extendControls处，加一个：any
【修改前】
image.png
【修改后】
image.png
以上就是这次总结的坑。
ps：官网列子中，新增图片按钮使用了Icon组建，这个在现在项目中是没有的，自行换一个图标。
网友评论