当前位置:首页 » 编程软件 » editor富文本编译器

editor富文本编译器

发布时间: 2023-09-03 19:05:20

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

【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组建,这个在现在项目中是没有的,自行换一个图标。

热点内容
php办公系统 发布:2025-07-19 03:06:35 浏览:896
奥德赛买什么配置出去改装 发布:2025-07-19 02:53:18 浏览:38
请与网络管理员联系请求访问权限 发布:2025-07-19 02:37:34 浏览:187
ipad上b站缓存视频怎么下载 发布:2025-07-19 02:32:17 浏览:842
phpcgi与phpfpm 发布:2025-07-19 02:05:19 浏览:525
捷达方向机安全登录密码是多少 发布:2025-07-19 00:57:37 浏览:690
夜魔迅雷下载ftp 发布:2025-07-19 00:39:29 浏览:97
增值税票安全接入服务器地址 发布:2025-07-19 00:20:45 浏览:484
solidworkspcb服务器地址 发布:2025-07-18 22:50:35 浏览:820
怎么在堆叠交换机里配置vlan 发布:2025-07-18 22:42:35 浏览:628