小程序富文本editor组件使用及初始化内容

小程序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()},

最后，如果这篇文章解决了您的问题请给个赞，欢迎大家评论及提出更好的建议

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！