伪原创编辑器(先看下官方文档富文本组件文档上的代码比较少)
优采云 发布时间: 2021-11-05 18:08伪原创编辑器(先看下官方文档富文本组件文档上的代码比较少)
先看官方文档
富文本组件文档
文档上的代码比较少。建议在开发工具中预览代码片段，如下图： 点击添加图片，链接失效，需要自己上传图片，将返回的图片插入富文本编辑器。
// 点击图片将图片插入富文本编辑器里面
insertImage() {
const that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
console.log(res.tempFilePaths,'上传图片')
wx.uploadFile({
url: '自己的图片上传地址',
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
app_token: app.data.userInfo.app_token,
},
success: function (res) {
console.log(res.data,'图片上传之后的数据')
var data = JSON.parse(res.data)
console.log(data.data.url)
that.editorCtx.insertImage({
src: data.data.url,
success: function () {
console.log('insert image success')
}
})
}
})
}
})
}
如果基础库低版本用户较多，建议做下兼容。如果需要编辑富文本之前提交的内容，需要在富文本初始化时加载上次提交的数据，并且需要放置拉取数据的代码。
//初始化富文本编辑器方法
onEditorReady() {
const that = this
wx.createSelectorQuery().select('#editor').context(function (res) {
that.editorCtx = res.context
that.loadData();//这里拉取需要编辑的数据然后初始化到编辑器里面
}).exec()
},
数据拉取成功后调用初始化编辑器内容的api
//初始化富文本编辑器方法
that.editorCtx.setContents({
html: '这里放接口返回的富文本标签数据',
success: function () {
console.log('insert html success')
}
})
此时可以在详情页点击编辑，然后初始化富文本内容再次编辑提交。项目效果图如下：
