预览效果.jpg
在wxml文件中,插入编辑器 editor
id="editor"
class="ql-container"
placeholder="{{placeholder}}"
value="{{articleContent}}"
bindinput="getEditorValue"
bindstatuschange="onStatusChange"
bindready="onEditorReady">
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;
}
因为我的富文本编辑器在页面底部,当输入很多内容时,无法上拉回到顶部查看其它内容(编辑器外面的内容),所以必须在页面的最外层使用纵向滚动条。
以上。