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