效果:
关于editor 富文本编辑器组件
复制到组件common 里面。json 引用即可
链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ
提取码:qzek
小程序富文本编辑器
wxml 部分;
组件内引用
<editorItem bind:Content="getHtml" option="{{option}}" bind:insertImage="insertImage" id="hf_editor"></editorItem>
data 部分
html: '',
option: {
placeholder: '编写文章...',
imgUp: false,
width: '100%',
height: '600rpx',
},
actions: [
{
id:1,
name: '提交审核',
},
{
id:2,
name: '退出保存草稿',
},
{
id:3,
name: '取消',
},
],
},
js 部分
//富文本编辑器
getHtml(e) {//从组件获取值
this.html = e.detail.content.html
console.log('提交的富文本', this.html)
},
insertImage(){ //图片上传插入示例
wx.chooseImage({
count: 1,
success: res => {
console.log(res);
wx.uploadFile({ //调用图片上传接口
url: 'http://192.168.1.61:3000/upload',
filePath: res.tempFilePaths[0],
name: 'imgFile',
success: res => {
var insertImages=res.data.url
console.log(insertImages)
let imgUrl = JSON.parse(res.data).url
this.selectComponent('#hf_editor').insertSrc('http://192.168.1.61:3000' + imgUrl);//调用组件insertSrc方法
}
})
}
})
},
json 引入组件