在官方代码下下载editor相关代码复制到自己的项目
图片上传到服务器
在insertImage()中加入uploadFile
insertImage() {
var that = this;
uni.chooseImage({
count:1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
console.log(res.tempFilePaths[0])
uni.uploadFile({
url: that.$globals.uploadUrl+'/api/img/open/upload', //服务器上传图片接口
name: 'file',
filePath: res.tempFilePaths[0],
success(res) {
var data = JSON.parse(res.data);
that.editorCtx.insertImage({
width: '100%', //设置宽度为100%防止宽度溢出手机屏幕
height: 'auto',
src: that.$globals.imgUrl+data.data,//接口返回的图片路径
alt: '图像',
success: function() {
console.log(that.$globals.imgUrl+data.data)
console.log('insert image success')
}
})
console.log(that.editorCtx)
}
})
}
})
},
获取HTML代码字符串
view代码加上@input=“getText”
js methods:
getText(e) {
var that = this;
console.log(e.detail.html); //带标签内容 作者qq1023732997
console.log(e.detail.text); //纯文本内容
this.infos = e.detail.html
},
图片上传成功编辑器反选页面渲染失败图片无法显示 src拼接了相对路径
这里的原因其实很简单 如果出现这种问题请检查你图片地址是否加了http://或者https://前缀 如果不加会默认拼接上你当前页面的路径导致渲染失败