微信小游戏富文本组件

miniprogram-richtext博客地址开始之前使用此组件需要依赖小程序基础库 2.7.0 以上版本低版本需做兼容处理。更多组件问题请阅读官方文档。安装教程下载源码git clone https://github.com/jxh1997/Editor.git使用说明在下载源码中找到组件目录components/richText将 richText 整个文件夹复制到你的项目中。在page.json中引入组件usingComponents: { richText:../../components/richText/richText },在page.wxml中使用组件richText idrichText readOnly{{readOnly}} placeholder{{placeholder}} formatDateYY/MM/DD buttonTxt保存 bind:clearBeforeEventclearBeforeEvent bind:clearSuccessclearSuccess bind:undoundo bind:restorerestore bind:onEditorReadyonEditorReady bind:bindfocusbindfocus bind:bindblurbindblur bind:bindinputbindinput bind:insertImageEventinsertImageEvent bind:getEditorContentgetEditorContent/richText在page.js中接受富文本编辑器相关事件。这里以插入图片为例。const app getApp(); let richText null; //富文本编辑器实例 Page({ /** * 页面的初始数据 */ data: { }, //编辑器初始化完成时触发可以获取组件实例 onEditorReady() { console.log([onEditorReady callback]) richText this.selectComponent(#richText); //获取组件实例 }, //插入图片 insertImageEvent() { wx.chooseImage({ count: 1, success: res { let path res.tempFilePaths[0]; //调用子组件富文本组件方法图片应先上传再插入不然预览时无法查看图片。 richText.insertImageMethod(path).then(res { console.log([insert image success callback], res) }).catch(res { console.log([insert image fail callback], res) }); } }) }, })组件属性属性名类型默认值说明readOnlyBooleanfalse编辑器是否只读placeholderString开始编辑吧…编辑器默认提示语formatDateStringYY/MM/DD插入的日期格式支持格式有‘YY-MM’, ‘YY.MM.DD’, ‘YY-MM-DD’, ‘YY/MM/DD’, ‘YY.MM.DD HH:MM’, ‘YY/MM/DD HH:MM’, ‘YY-MM-DD HH:MM’buttonTxtString保存按钮文字组件方法函数类型默认值说明clearBeforeEventfunction空清空编辑器内容之前的回调clearSuccessfunction空清空编辑器内容成功时回调undofunction空撤销内容成功时回调restorefunction空恢复内容成功时回调onEditorReadyfunction空编辑器初始化完成时回调可以获取组件实例bindfocusfunction空编辑器聚焦时触发bindblurfunction空编辑器失去焦点时触发bindinputfunction空编辑器输入中时触发实时返回富文本内容insertImageEventfunction空插入图片按钮点击时回调getEditorContentfunction空保存按钮点击时回调返回富文本内容演示你可以用 微信web开发者工具 打开项目 miniprogram-richtext 查看完整演示。源码借鉴链接感谢原作者如有侵权请联系删除。