摘要：富文本框的实现值传入是受控组件，故可以利用赋予初值。从表单获取到富文本框的内容就是最开始传入的对象富文本内容通过其自身的函数获取总结插件集成度很高，至此已经实现了基本的操作，并且支持图片和其他媒体。
BraftEditor富文本框的实现 1. 值传入
BraftEditor是受控组件，故可以利用form.getFieldDecorator()赋予初值。
需要注意的是需要用到他自己封装好的一个editorState对象，如果没有则需要用BraftEditor.createEditorState(String)函数创建一个。比如：
2. 值传出{getFieldDecorator("context", { //BraftEditor引用后就可以使用 initialValue: BraftEditor.createEditorState(context) || "", })( )}
BraftEditor比较容易获取内容，可以直接用表单拿到其内容。
const formData = form.getFieldsValue();
//从表单获取到富文本框的内容
const context = formData.context;
//context 就是最开始传入的editorState对象
//富文本内容,通过其自身的函数获取
const contextRich = context.toHTML();
总结
BraftEditor插件集成度很高，至此已经实现了基本的操作，并且支持图片和其他媒体。
再添加图片时，会将图片转码成base64作为url放入标签，并存于富文本框中。当表单返回时会作为内容，协同富文本内容的其他部分一起被获取到。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100132.html
摘要：配置涵盖了目前的业务场景的基本需求，但是可扩展性很低。最终决定采用的生态链来解决上述遇到的问题。在指定的路径下写入对应的文件。 大纲 遇到的问题场景及解决方案对比 什么是babel？ 解决过程 目前遗留的问题 目前实现功能API 参考 遇到的问题场景及解决方案对比 我们目前采用的是antd + react(umi)的框架做业务开发。在业务开发过程中会有较多频繁出现并且相似度很高的场...
摘要：经过一周左右的时间完成了基础组件的编写。配置涵盖了目前的业务场景的基本需求，但是可扩展性很低。最终决定采用的生态链来解决上述遇到的问题。在指定的路径下写入对应的文件。大纲 遇到的问题场景及解决方案对比 什么是babel？ 解决过程 目前遗留的问题 目前实现功能API 参考 遇到的问题场景及解决方案对比 我们目前采用的是antd + react(umi)的框架做业务开发。在业务开发过程中会...
摘要：由于我们的富文本输入框比较简单，所以只需要处理两类数据即可，其一是普通的文本类型数据，包括表情其二则是图片类型数据。 最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。 仓库地址：chat-input-box预览地址：https://codepen.io...
摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。 前言 我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...
摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。 前言 我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...
阅读 1195·2023-04-25 23:47
阅读 883·2021-11-23 09:51
阅读 4281·2021-09-26 10:17
阅读 3679·2021-09-10 11:19
阅读 3233·2021-09-06 15:10
阅读 3530·2019-08-30 12:49
阅读 2362·2019-08-29 13:20
阅读 1708·2019-08-28 18:14
