效果图：
1.首先进入官方文档的editor地址
https://developers./miniprogram/dev/component/editor.html
2.可点击官方文档下方的在开发工具中预览效果
3.注意！！！官方的文档并不一定能跑起来，请替换editor下的js.wxml.wxss文件为下方贴出来的。
wxml文件：
<view class="page-body"><view class='wrapper'><view class='toolbar' bindtap="format"><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-zitishanchuxian {{formats.strike ? 'ql-active' : ''}}" data-name="strike"></i><i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i><i class="iconfont icon-indent" data-name="indent" data-value="+1"></i><i class="iconfont icon-fengexian" bindtap="insertDivider"></i><i class="iconfont icon-charutupian" bindtap="insertImage"></i></view><editor id="editor" class="ql-container" placeholder="提示信息" showImgSize showImgToolbar showImgResize bindinput="getEditorValue" bindready="onEditorReady"></editor></view></view>
wxss文件：
@import "../common/lib/weui.wxss";@import "./assets/iconfont.wxss";.wrapper {padding: 5px;}.iconfont {display: inline-block;padding: 8px 8px;width: 24px;height: 24px;cursor: pointer;font-size: 20px;}.toolbar {box-sizing: border-box;/* border: 1px solid #ccc; */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;/* border-top: 1px solid #ccc;border-bottom: 1px solid #ccc; */background: #fff;margin-top: 20px;font-size: 16px;line-height: 1.5;}.ql-active {color: #06c;}
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)})},/** editor 部分 **///获取编辑器的内容getEditorValue(e) {this.setData({['formData.content']: e.detail.html})},onEditorReady() {const that = thiswx.createSelectorQuery().select('#editor').context(function (res) {that.editorCtx = res.context;wx.showLoading({title: '加载内容中...',})setTimeout(function () {let data = that.data;wx.hideLoading();that.editorCtx.setContents({html: data.pageData ? data.pageData.content : '',success: (res) => {console.log(res)},fail: (res) => {console.log(res)}})}, 1000)}).exec()},insertDivider() {this.editorCtx.insertDivider({success: function () {console.log('insert divider success')}})},format(e) {let { name, value } = e.target.datasetif (!name) return// console.log('format', name, value)this.editorCtx.format(name, value)},//插入图片事件监听insertImage() {var _this = this;var that = this;wx.showActionSheet({itemList: ['从相册中选择', '拍照'],itemColor: "#00000",success: function (res) {if (!res.cancel) {if (res.tapIndex == 0) {that.chooseWxImage_editor('album')} else if (res.tapIndex == 1) {that.chooseWxImage_editor('camera')}}}})},// 选择图片本地路径chooseWxImage_editor: function (type) {var that = this;var imgsPaths = that.data.imgs;wx.chooseImage({sizeType: ['original', 'compressed'],sourceType: [type],success: function (res) {console.log(res.tempFilePaths[0]);that.upImgs_editor(res.tempFilePaths[0], 0) //调用上传方法}})},/**编辑器图片上传至服务器**/upImgs_editor: function (imgurl, index) {var that = this;var _this = this;wx.uploadFile({url: '/fileUpload',//此处的服务器地址请替换成自己的filePath: imgurl,name: 'file',header: {'content-type': 'multipart/form-data'},formData: null,success: function (res) {var resj = JSON.parse(res.data);console.log(resj) //接口返回网络 var src = resj.data.url//插入到回答主体中_this.editorCtx.insertImage({src: src,data: {id: 'abcd',role: 'god'},success: function () {console.log('insert image success')}})}})},/** editor 部分结束 **/})
