1.参考官方文档：editor | 微信开放文档
在文档最下方有示例代码，如下图：
点击“在开发者工具中预览效果”
2.将示例代码保存至桌面，以便后期操作
3.文件夹中有一下文件，如下图，我们主要使用前两个文件夹
4.将前两个文件甲复制到你项目的根目录下
5.写代码
wxml代码：
<view class="container" style="height:{{editorHeight}}px;"><editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady"></editor></view><view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px"><i class="iconfont icon-charutupian" catchtouchend="insertImage"></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-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></view>
js代码：
Page({data: {formats: {},readOnly: false,placeholder: '开始输入...',editorHeight: 300,keyboardHeight: 0,isIOS: false},readOnlyChange() {this.setData({readOnly: !this.data.readOnly})},onLoad() {const platform = wx.getSystemInfoSync().platformconst isIOS = platform === 'ios'this.setData({ isIOS})const that = thisthis.updatePosition(0)let keyboardHeight = 0wx.onKeyboardHeightChange(res => {if (res.height === keyboardHeight) returnconst duration = res.height > 0 ? res.duration * 1000 : 0keyboardHeight = res.heightsetTimeout(() => {wx.pageScrollTo({scrollTop: 0,success() {that.updatePosition(keyboardHeight)that.editorCtx.scrollIntoView()}})}, duration)})},updatePosition(keyboardHeight) {const toolbarHeight = 50const { windowHeight, platform } = wx.getSystemInfoSync()let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeightthis.setData({ editorHeight, keyboardHeight })},calNavigationBarAndStatusBar() {const systemInfo = wx.getSystemInfoSync()const { statusBarHeight, platform } = systemInfoconst isIOS = platform === 'ios'const navigationBarHeight = isIOS ? 44 : 48return statusBarHeight + navigationBarHeight},onEditorReady() {const that = thiswx.createSelectorQuery().select('#editor').context(function (res) {that.editorCtx = res.context}).exec()},blur() {this.editorCtx.blur()},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 })},insertDivider() {this.editorCtx.insertDivider({success: function () {console.log('insert divider success')}})},clear() {this.editorCtx.clear({success: function (res) {console.log("clear success")}})},removeFormat() {this.editorCtx.removeFormat()},insertDate() {const date = new Date()const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`this.editorCtx.insertText({text: formatDate})},insertImage() {const that = thiswx.chooseImage({count: 1,success: function (res) {that.editorCtx.insertImage({src: res.tempFilePaths[0],data: {id: 'abcd',role: 'god'},width: '80%',success: function () {console.log('insert image success')}})}})},click:function(e){console.log(e.currentTarget.dataset.name)}})
wxss代码：（注：前两行的路径要自行修改）
@import "../../common/lib/weui.wxss";@import "../../editor/assets/iconfont.wxss";.container {position: absolute;top: 0;left: 0;width: 100%;}.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;cursor: pointer;font-size: 20px;}.toolbar {box-sizing: border-box;padding: 0 10px;height: 50px;width: 100%;position: fixed;left: 0;right: 100%;bottom: 0;display: flex;align-items: center;justify-content: space-between;border: 1px solid #ECECEC;border-left: none;border-right: none;}
json代码：
{"navigationBarTitleText": "发表文章","disableScroll": true}
