小程序editor组件使用及内容回显（初始化编辑器内容）
结合官网的editor组件和相关API可以更好的理解
先看效果图
<view class="toolbar" catchtouchend="format"><i class="iconfont icon-format-header-1 {{formats.header === 1 ? 'ql-active' : ''}}" data-name="header" data-value="{{1}}"></i><i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i><i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i><i class="iconfont icon-format-header-4 {{formats.header === 4 ? 'ql-active' : ''}}" data-name="header" data-value="{{4}}"></i><i class="iconfont icon-format-header-5 {{formats.header === 5 ? 'ql-active' : ''}}" data-name="header" data-value="{{5}}"></i><i class="iconfont icon-format-header-6 {{formats.header === 6 ? 'ql-active' : ''}}" data-name="header" data-value="{{6}}"></i><i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i><i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i><i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i><i class="iconfont icon--checklist" data-name="list" data-value="check"></i><i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i><i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i><i class="iconfont icon-fontsize {{formats.fontSize === '24px' ? 'ql-active' : ''}}" data-name="fontSize" data-value="24px"></i><i class="iconfont icon-text_color {{formats.color === '#0000ff' ? 'ql-active' : ''}}" data-name="color" data-value="#0000ff"></i><i class="iconfont icon-fontbgcolor {{formats.backgroundColor === '#E33D1E' ? 'ql-active' : ''}}" data-name="backgroundColor" data-value="#E33D1E"></i><i class="iconfont icon-indent" data-name="indent" data-value="+1"></i><i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i><i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i><i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align" data-value="right"></i><i class="iconfont icon-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left"></i><i class="iconfont icon-zitixiabiao {{formats.script === 'sub' ? 'ql-active' : ''}}" data-name="script" data-value="sub"></i><i class="iconfont icon-zitishangbiao {{formats.script === 'super' ? 'ql-active' : ''}}" data-name="script" data-value="super"></i><i class="iconfont icon-zitiyanse {{formats.color === '#e33d1e' ? 'ql-active' : ''}}" data-name="color" data-value="#e33d1e"></i><i class="iconfont icon-undo" bindtap="undo"></i><i class="iconfont icon-redo" bindtap="redo"></i><i class="iconfont icon-date" bindtap="insertDate"></i><i class="iconfont icon-clearup" bindtap="clear"></i></view><view class="" style="height:{{editorHeight}}px;"><editor id="editor" class="ql-container" placeholder="开始输入..." bindstatuschange="onStatusChange" bindready="onEditorReady" bindblur="blur" show-img-toolbar show-img-resize></editor></view><view class="insertImg bg_white flex_yC" catchtouchend="insertImage"><i class="iconfont icon-charutupian"></i>插入图片</view><view class="save bg_white flex_xy_center" style="height: {{btnHeight}}px;" bindtap="tapSave">完成</view>
引入css，weui.wxss和iconfont.wxss自行在官网下载即可
@import "../../../common/weui.wxss";@import "../../../common/iconfont.wxss";.ql-container {box-sizing: border-box;width: 100%;height: 100%;font-size: 16px;line-height: 1.5;overflow: auto;padding: 10px 10px 20px 10px;border: 1px solid #ECECEC;}.ql-active {color: #22C704;}.iconfont {display: inline-block;width: 30px;height: 30px;text-align: center;cursor: pointer;font-size: 20px;}.toolbar {box-sizing: border-box;padding: 5px 10px;width: 100%;display: flex;align-items: center;flex-wrap: wrap;border: 1px solid #ECECEC;}.insertImg{font-size: 26rpx;padding: 8rpx 30rpx 8rpx 25rpx;border-radius: 40rpx;position: fixed;top: 70vh;right: 20rpx;box-shadow: 0 5rpx 17rpx 0 rgba(0, 0, 0, 0.06);}.save{width: 100%;color: blue;}
js模块
data: {formats: {},readOnly: false,editorHeight: 300, // 编辑器的高度btnHeight: 50, // 底部按钮高度isIOS: false,html: ''},redo(){// 恢复this.editorCtx.redo()},undo(){// 撤销this.editorCtx.undo()},clear() {// 清空编辑器内容this.editorCtx.clear({success: function (res) {console.log("clear success")}})},insertImage() {// 插入图片const that = thiswx.chooseImage({count: 1,success: function (res) {// 在这里上传到服务器that.editorCtx.insertImage({src: res.tempFilePaths[0],extClass: 'edit_img',width: '80%',success: function () {console.log('insert image success')}})}})},onLoad(option) {const platform = wx.getSystemInfoSync().platformconst isIOS = platform === 'ios'console.log(333, option)wx.createSelectorQuery().select('.toolbar').boundingClientRect(rect=>{let height = rect.heightconst {windowHeight } = wx.getSystemInfoSync()console.log('工具栏高度=', height)this.setData({isIOS,editorHeight: windowHeight - height - this.data.btnHeight})}).exec();if(!option.html) returnconst html = option.html.replace(/\+/g, '=') // 上个页面把 = 转换成了 + ，现在恢复 = this.setData({html })},// 初始化编辑器onEditorReady() {const that = thiswx.createSelectorQuery().select('#editor').context(function (res) {that.editorCtx = res.contextwx.pageScrollTo({scrollTop: 0,success: () => {that.editorCtx.scrollIntoView()}})if(!res || !that.data.html) returnthat.editorCtx.setContents({html: that.data.html,success: result => {console.log('初始化内容成功 ', result)},fail: err => {console.log('初始化内容失败 ', err)}})}).exec()},
