uniAPP 去插件市场搜了一下这个编辑器比较简单但是兼容性强,所以就选定了它,感觉怎么说呢我需要的功能不多,只要图文混排
这个编辑器支持文字,图片,视频混排。所以就决定用它了,毕竟用户发东西时候手机排版本来就很鸡肋,所以就选定用它了,感觉功能简单,能看得懂,可以自己去改一下就可以用,上传视频功能我给注释掉了,暂时不用。
调用方法:
组件给的方法(因为图片上传我自己封装的统一的上传,所以不用他的uploadurl参数了,我需要token才能上传):
下面是正文里的代码:
import { UploadImg } from '@/utils/index'
export default {
name:'bgyxedit',
props: {
taskinfodtv: {
type: Array,
default() {
return [{type:'text',value:'',f:false}];
}
},
mtype: {
type: Array,
default() {
return ['text','img','video'];
}
},
uploadurl: {
type: String,
default: ''
},
showdone: {
type: Boolean,
default: false
},
filename: {
type: String,
default: 'uploadfile'
},
placeholder:{
type: String,
default: '请输入...'
}
},
data() {
return {
htmlinfo:[{type:'text',value:'',f:false}],
};
},
methods: {
returnthisinfo:function(){
//console.log(this.taskinfodtv)
this.$emit('bgyxchange', this.returninfo());
},
returninfo:function(){
var that = this
var infoarr = that.taskinfodtv
var info = '';
for(var o in infoarr){
var arr = infoarr[o]
if(arr.value){
if(arr.type == 'text'){
info = info + '
'+arr.value+'
';}
if(arr.type == 'img'){
info = info + '
';
}
// if(arr.type == 'video'){
// info = info + '
';// }
}
}
if(info){
info = '
' + info + '
'return {'html':info,'data':infoarr};
}else{
return {'html':'','data':infoarr};
}
},
addvuetype:function(e){
var that = this
if(e == 0){
this.taskinfodtv.push({type:'text',value:'',f:true})
//that.htmlinfo.push({type:'text',value:'',f:true})
}
if(e == 1){
uni.chooseImage({
count:1,
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.showLoading({
title:'上传中...'
})
new UploadImg(tempFilePaths, {
complete: function(res) {
//console.log(res);
var upimg = res[0].url;
that.taskinfodtv.push({type:'img',value:upimg});
console.log(that.taskinfodtv);
that.htmlinfo=that.taskinfodtv;
that.$emit('bgyxchange', that.returninfo());
uni.hideLoading();
}
})
}
});
}
// if(e == 2){
// uni.chooseVideo({
// count: 1,
// sourceType: ['camera', 'album'],
// success: function (res) {
// var vd = res.tempFilePath;
// uni.showLoading({
// title:'上传中...'
// })
// uni.uploadFile({
// url: that.uploadurl, //上传后返回文件保存的路径即可
// header: {
// 'X-Access-Token': global.token
// },
// filePath: vd,
// name: 'video',
// success: (uploadFileRes) => {
// console.log(uploadFileRes.data);
// var video = uploadFileRes.data
// that.taskinfodtv.push({type:'video',value:video})
// that.$emit('bgyxchange', that.returninfo());
// uni.hideLoading()
// }
// });
// }
// });
// }
},
delthisel:function(i){
var that = this
var arr = this.taskinfodtv
// if(i == 0){
// var list = ['↓下移↓', '删除']
// }
// if(i == arr.length-1){
// var list = ['↑上移↑', '删除']
// }
uni.showActionSheet({
itemList: ['↑上移↑','↓下移↓', '删除'],
success: function (res) {
var k = res.tapIndex
console.log(k)
if(k == 0){
if(i>0){
var ls = arr[i]
arr[i] = arr[i-1]
arr[i-1] = ls
that.taskinfodtv = []
for(var o in arr){
that.taskinfodtv.push(arr[o])
}
that.$emit('bgyxchange', that.returninfo());
console.log(that.taskinfodtv)
}
}
if(k==1){
if(i<(arr.length-1)){
var ls = arr[i]
arr[i] = arr[i+1]
arr[i+1] = ls
that.taskinfodtv = []
for(var o in arr){
that.taskinfodtv.push(arr[o])
}
that.$emit('bgyxchange', that.returninfo());
console.log(that.taskinfodtv)
}
}
if(k==2){
that.taskinfodtv.splice(i,1)
that.$emit('bgyxchange', that.returninfo());
console.log(that.taskinfodtv)
}
},
fail: function (res) {
console.log(res.errMsg);
}
});
}
}
};