页面显示的效果图如上，
1. 页面结构
assets文件夹在官方给的示例里面有，参照 editor | 微信开放文档
2. other.js
在页面Page函数中，创建onEditorReady函数，用来获取富文本编辑器示例EditorContext
onEditorReady(){
constthat=this;
wx.createSelectorQuery().select('#editor').context(function(res){
that.editorCtx=res.context
}).exec()
},
/*** 页面的初始数据*/data: {//编辑器设置editorHeight: 300,readOnly: false,placeholder: '开始输入...'},/*** 生命周期函数--监听页面加载*/onLoad(options) {let neirong = '<ul data-checked="true"><li>asd</li><li>zxc</li><li>qwe</li></ul>';wx.createSelectorQuery().select('#editor').context(function (res) {this.editorCtx = res.context;//初始化编辑器---<span>Hello!大家好啊！</span>this.editorCtx.setContents({'html': neirong,success: function (res) {console.log(res, "res")}});}).exec();},format(e) {let {name,value} = e.target.datasetif (!name) return// console.log('format', name, value)this.editorCtx.format(name, value);},onStatusChange(e) {const formats = e.detailthis.setData({formats})},onEditorReady() {const that = this;wx.createSelectorQuery().select('#editor').context(function (res) {that.editorCtx = res.context}).exec()},//删除clear() {this.editorCtx.clear({success: function (res) {console.log("clear success")}})},//取值getContent: function (e) {this.editorCtx.getContents({success: function (res) {console.log(res.html);}})},
3. other.wxml
富文本编辑器的图标参照官方文档：
EditorContext.format(string name, string value) | 微信开放文档
<view class="page-body"><view class='wrapper'><!--操作工具栏--> <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-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-text_color {{formats.color ? 'ql-active' : ''}}" data-name="color"></i><i class="iconfont icon-fontbgcolor {{formats.backgroundColor ? 'ql-active' : ''}}" data-name="backgroundColor"></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-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left"></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-shanchu" bindtap="clear"></i> </view><editor id="editor" class="ql-container" style="height:{{editorHeight}}px;" bindstatuschange="onStatusChange" placeholder="{{placeholder}}" read-only="{{readOnly}}" bindready="onEditorReady"></editor></view></view><view class="button" bindtap="getContent">提 交</view>
4. other.wxss
需要在other.wxss中引入iconfont.wxss字体图标。
@import "./assets/iconfont.wxss";page {width: 740rpx;margin: 0 auto;background-color: #f9f9f9;}.wrapper {padding: 5px;}.ql-active {color: #22C704;}.iconfont {display: inline-block;padding: 8px 8px;width: 24px;height: 24px;cursor: pointer;font-size: 20px;}.toolbar {box-sizing: border-box;border-bottom: 0;font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;}.ql-container {box-sizing: border-box;padding: 12px 15px;width: 100%;min-height: 30vh;height: auto;background: #fff;margin-top: 20px;font-size: 16px;line-height: 1.5;border: 1rpx solid #f2f2f2;border-radius: 15rpx;}.button {width: 360rpx;height: 80rpx;line-height: 80rpx;text-align: center;margin: auto;margin-top: 50rpx;border-radius: 8rpx;font-size: 32rpx;color: white;background-color: #497749 !important;}
参照：微信小程序实战之实现富文本编辑器_微信小程序富文本编辑器_梅花十三儿的博客-CSDN博客
