1.参考官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
在文档最下方有示例代码，如下图：
点击“在开发者工具中预览效果”
2.将示例代码保存至桌面，以便后期操作
3.文件甲中有一下文件，如下图，我们主要使用前两个文件夹
4.将前两个文件甲复制到你项目的根目录下
5.写代码
wxml代码：
1 <view class="container" style="height:{{editorHeight}}px;"> 2 <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady"> 3 </editor> 4 </view> 5 6 <view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px"> 7 <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i> 8 <i class="iconfont icon-format-header-2 {{formats.header === 2 ? \'ql-active\' : \'\'}}" data-name="header" data-value="{{2}}"></i> 9 <i class="iconfont icon-format-header-3 {{formats.header === 3 ? \'ql-active\' : \'\'}}" data-name="header" data-value="{{3}}"></i> 10 <i class="iconfont icon-zitijiacu {{formats.bold ? \'ql-active\' : \'\'}}" data-name="bold"></i> 11 <i class="iconfont icon-zitixieti {{formats.italic ? \'ql-active\' : \'\'}}" data-name="italic"></i> 12 <i class="iconfont icon-zitixiahuaxian {{formats.underline ? \'ql-active\' : \'\'}}" data-name="underline"></i> 13 <i class="iconfont icon--checklist" data-name="list" data-value="check"></i> 14 <i class="iconfont icon-youxupailie {{formats.list === \'ordered\' ? \'ql-active\' : \'\'}}" data-name="list" data-value="ordered"></i> 15 <i class="iconfont icon-wuxupailie {{formats.list === \'bullet\' ? \'ql-active\' : \'\'}}" data-name="list" data-value="bullet"></i> 16 </view>
js代码：
1 Page({ 2 data: { 3 formats: {}, 4 readOnly: false, 5 placeholder: \'开始输入...\', 6 editorHeight: 300, 7 keyboardHeight: 0, 8 isIOS: false 9 }, 10 readOnlyChange() { 11 this.setData({ 12 readOnly: !this.data.readOnly 13 }) 14 }, 15 onLoad() { 16 const platform = wx.getSystemInfoSync().platform 17 const isIOS = platform === \'ios\' 18 this.setData({ isIOS}) 19 const that = this 20 this.updatePosition(0) 21 let keyboardHeight = 0 22 wx.onKeyboardHeightChange(res => { 23 if (res.height === keyboardHeight) return 24 const duration = res.height > 0 ? res.duration * 1000 : 0 25 keyboardHeight = res.height 26 setTimeout(() => { 27 wx.pageScrollTo({ 28 scrollTop: 0, 29 success() { 30 that.updatePosition(keyboardHeight) 31 that.editorCtx.scrollIntoView() 32 } 33 }) 34 }, duration) 35 36 }) 37 }, 38 updatePosition(keyboardHeight) { 39 const toolbarHeight = 50 40 const { windowHeight, platform } = wx.getSystemInfoSync() 41 let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight 42 this.setData({ editorHeight, keyboardHeight }) 43 }, 44 calNavigationBarAndStatusBar() { 45 const systemInfo = wx.getSystemInfoSync() 46 const { statusBarHeight, platform } = systemInfo 47 const isIOS = platform === \'ios\' 48 const navigationBarHeight = isIOS ? 44 : 48 49 return statusBarHeight + navigationBarHeight 50 }, 51 onEditorReady() { 52 const that = this 53 wx.createSelectorQuery().select(\'#editor\').context(function (res) { 54 that.editorCtx = res.context 55 }).exec() 56 }, 57 blur() { 58 this.editorCtx.blur() 59 }, 60 format(e) { 61 let { name, value } = e.target.dataset 62 if (!name) return 63 // console.log(\'format\', name, value) 64 this.editorCtx.format(name, value) 65 66 }, 67 onStatusChange(e) { 68 const formats = e.detail 69 this.setData({ formats }) 70 }, 71 insertDivider() { 72 this.editorCtx.insertDivider({ 73 success: function () { 74 console.log(\'insert divider success\') 75 } 76 }) 77 }, 78 clear() { 79 this.editorCtx.clear({ 80 success: function (res) { 81 console.log("clear success") 82 } 83 }) 84 }, 85 removeFormat() { 86 this.editorCtx.removeFormat() 87 }, 88 insertDate() { 89 const date = new Date() 90 const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}` 91 this.editorCtx.insertText({ 92 text: formatDate 93 }) 94 }, 95 insertImage() { 96 const that = this 97 wx.chooseImage({ 98 count: 1, 99 success: function (res) { 100 that.editorCtx.insertImage({ 101 src: res.tempFilePaths[0], 102 data: { 103 id: \'abcd\', 104 role: \'god\' 105 }, 106 width: \'80%\', 107 success: function () { 108 console.log(\'insert image success\') 109 } 110 }) 111 } 112 }) 113 }, 114 click:function(e){ 115 console.log(e.currentTarget.dataset.name) 116 } 117 }) 118
wxss代码：（注：前两行的路径要自行修改）
1 @import "../../common/lib/weui.wxss"; 2 @import "../../editor/assets/iconfont.wxss"; 3 4 .container { 5 position: absolute; 6 top: 0; 7 left: 0; 8 width: 100%; 9 } 10 11 .ql-container { 12 box-sizing: border-box; 13 width: 100%; 14 height: 100%; 15 font-size: 16px; 16 line-height: 1.5; 17 overflow: auto; 18 padding: 10px 10px 20px 10px; 19 border: 1px solid #ECECEC; 20 } 21 22 .ql-active { 23 color: #22C704; 24 } 25 26 .iconfont { 27 display: inline-block; 28 width: 30px; 29 height: 30px; 30 cursor: pointer; 31 font-size: 20px; 32 } 33 34 .toolbar { 35 box-sizing: border-box; 36 padding: 0 10px; 37 height: 50px; 38 width: 100%; 39 position: fixed; 40 left: 0; 41 right: 100%; 42 bottom: 0; 43 display: flex; 44 align-items: center; 45 justify-content: space-between; 46 border: 1px solid #ECECEC; 47 border-left: none; 48 border-right: none; 49 }
json代码：
1 { 2 "navigationBarTitleText": "发表文章", 3 "disableScroll": true 4 }
6.然后依次保存就好
7.最后点击真机调试，用手机扫描二维码便可以使用了。
