可以参考官网的案例：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', () =>{})
以上。
