可以參考官網的案例：https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
結合自己頁面結構，適當修改官網的例子，以下是我使用的情況。
預覽效果.jpg
在wxml文件中，插入編輯器 editor
<!-- 富文本編輯器 start -->
<scroll-view scroll-y="true" style="height: {{winHeight}}rpx;"> <!-- 根據需要設置滾動條 -->
<view class="container" style="height:{{editorHeight}}px;" >
<editor
id="editor"
class="ql-container"
placeholder="{{placeholder}}"
value="{{articleContent}}"
bindinput="getEditorValue"
bindstatuschange="onStatusChange"
bindready="onEditorReady">
</editor>
</view>
</scroll-view>
<!-- 工具欄可增刪減，keyboardHeight表示根據鍵盤位置彈出，可以去掉，在CSS中position自定義工具欄的位置-->
<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>
<!-- 富文本編輯器 start -->
JS部分
在data中定義富文本編輯器所需要的變量
data: {
articleContent: '', //文章正文
formats: {},
readOnly: false,
placeholder: '開始輸入...',
editorHeight: 300,
keyboardHeight: 0,
isIOS: false
}
//請求接口數據
getDetail(id) {
if (!id) return false
util.request({
url: api.ArticleDetail,
data: {
id: id
}
}).then(res => {
if (res.code == 200) {
const article = res.data.records[0]
this.setData({
articleContent: article.content //正文內容，要寫入富文本編輯器中的內容
})
event.emit('resetEditor', {}) //調用onEditorReady方法，重新渲染編輯器
}
})
},
// -----------富文本編輯器 start ------------------
readOnlyChange() {
this.setData({
readOnly: !this.data.readOnly
})
},
updatePosition(keyboardHeight) {
const toolbarHeight = 50
const { windowHeight, platform } = wx.getSystemInfoSync()
let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
this.setData({ editorHeight, keyboardHeight })
},
calNavigationBarAndStatusBar() {
const systemInfo = wx.getSystemInfoSync()
const { statusBarHeight, platform } = systemInfo
const isIOS = platform === 'ios'
const navigationBarHeight = isIOS ? 44 : 48
return statusBarHeight + navigationBarHeight
},
onEditorReady() {
const that = this
wx.createSelectorQuery().select('#editor').context(function (res) {
that.editorCtx = res.context
//一進入頁面就初始化富文本編輯器，此時還未發送請求獲取不到數據，編輯器內容html為空（that.data.articleContent為空）
//請求完數據后再調用這個方法，才能取到數據寫入編輯器')
that.editorCtx.setContents({
html: that.data.articleContent //將數據寫入編輯器內
})
//在這里用event.on注冊onEditorReady方法
//當event.emit執行時，就會調用onEditorReady方法，重新渲染富文本編輯器
//此時就能獲取到數據，寫入編輯器中（即給that.data.articleContent賦值后，他不再為空）
event.on('resetEditor', that, that.onEditorReady.bind(that))
}).exec()
},
blur() {
this.editorCtx.blur()
},
format(e) {
let { name, value } = e.target.dataset
if (!name) return
console.log('format', name, value)
this.editorCtx.format(name, value)
},
onStatusChange(e) {
const formats = e.detail
this.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 = this
wx.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')
}
})
}
})
},
getEditorValue(e) {
this.setData({
articleContent: e.detail.html
})
console.log(e.detail.html)
},
// -----------富文本編輯器 end ------------------
關于樣式
注意：可以直接拷貝官網的editor樣式表，但一定要引入weui.wxss和iconfont.wxss
@import "./weui.wxss";
@import "./iconfont.wxss";
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-bottom: 50rpx;
background-color: #fff;
border-top: 1px solid #dfdfdf;
}
.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;
border-top: 0;
}
.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;
background-color: #fff;
}
因為我的富文本編輯器在頁面底部，當輸入很多內容時，無法上拉回到頂部查看其它內容（編輯器外面的內容），所以必須在頁面的最外層使用縱向滾動條。
2021.07.22
補充上面的event方法代碼 新建一個event.js文件
export class Event {
on(event, fn, ctx) { //注冊監聽
if (typeof fn != "function") {
console.error('fn must be a function')
return
}
this._stores = this._stores || {}
; (this._stores[event] = this._stores[event] || []).push({ cb: fn, ctx: ctx })
}
emit(event) { //觸發
this._stores = this._stores || {}
var store = this._stores[event], args
if (store) {
store = store.slice(0)
args = [].slice.call(arguments, 1)
for (var i = 0, len = store.length; i < len; i++) {
store[i].cb.apply(store[i].ctx, args)
}
}
}
off(event, fn, ctx) {
this._stores = this._stores || {}
// all
if (!arguments.length) {
this._stores = {}
return
}
// specific event
var store = this._stores[event]
if (!store) return
// remove all handlers
if (arguments.length === 1) {
delete this._stores[event]
return
}
// remove specific handler
var cb
for (var i = 0, len = store.length; i < len; i++) {
cb = store[i].cb
if (store[i].ctx === ctx) {
store.splice(i, 1)
break
}
}
return
}
}
在app.js中 onLaunch方法內，引入event方法
image.png
在文件中使用：
wx.on('方法名', 接收emit參數=> { 你自己的方法 })
上方富文本編輯器JS中的event.emit() 和 event.on()可修改如下：
event.emit('resetEditor', {})
改為：wx.$emit('resetEditor', {})event.on('resetEditor', that, that.onEditorReady.bind(that))
改為：wx.$on('resetEditor', () =>{})
以上。
