uniAPP 去插件市场搜了一下这个编辑器比较简单但是兼容性强，所以就选定了它，感觉怎么说呢我需要的功能不多，只要图文混排
这个编辑器支持文字，图片，视频混排。所以就决定用它了，毕竟用户发东西时候手机排版本来就很鸡肋，所以就选定用它了，感觉功能简单，能看得懂，可以自己去改一下就可以用，上传视频功能我给注释掉了，暂时不用。
调用方法：
<bgyxedit @bgyxchange="getbgyxinfo" :showdone="false" placeholder="添加正文与标签" filename="img"></bgyxedit>
组件给的方法（因为图片上传我自己封装的统一的上传，所以不用他的uploadurl参数了，我需要token才能上传）：
<!-- getbgyxinfo(e) 用于接收html数据和原始数据，
showdone控制完成按钮是否显示，
uploadurl设置图片和视频上传地址，
filename设置上传字段名
所有元素支持长按菜单
-->
<bgyxedit @bgyxchange="getbgyxinfo" :showdone="false" placeholder="添加正文与标签" :uploadurl="UPLOAD_IMAGE_URL" filename="img"></bgyxedit>
下面是正文里的代码：
<template>
<view style="align-items: center; width:100%;display: flex;flex-direction: column;border-radius: 8rpx;">
<view style="width: 100%;" v-for="(u,i) in htmlinfo">
<view @longpress="delthisel(i)" v-if="u.type=='text'" style="width: 100%;">
<textarea @confirm="returnthisinfo()" @input="returnthisinfo()" @blur="returnthisinfo()" style="width: 100%; height: 200upx;" :placeholder="placeholder" placeholder-style="color:#686868;" :focus="u.f" :clearable="false" v-model="taskinfodtv[i].value" maxlength="-1"/>
</view>
<view v-if="u.type=='img'" style="width: 100%;">
<image @longpress="delthisel(i)" :src="htmlinfo[i]['value']" style="width:100%;margin: auto;" mode="widthFix"></image>
</view>
<!-- <view v-if="u.type=='video'" style="width: 100%;">
<video @longpress="delthisel(i)" src="/static/55.mp4" style="width: 680rpx;margin: auto;" controls></video>
</view> -->
</view>
<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx;">
<view style="margin:8rpx 24rpx 0rpx 10rpx;">
<image v-if="showdone" @click="returnthisinfo()" src="https://yunxing.ydyx720.com/statics/wx/static/editor/done.png" style="width: 50rpx;height: 50rpx;" mode="widthFix"></image>
</view>
<view style="display: flex;align-items: center;">
<view style="margin:8rpx 24rpx 0rpx 3rpx;">
<image @click="addvuetype(0)" src="https://yunxing.ydyx720.com/statics/wx/static/editor/wenben.png" style="width: 42rpx;height: 42rpx;" mode="widthFix"></image>
</view>
<view style="margin:8rpx 24rpx 0rpx 3rpx;">
<image @click="addvuetype(1)" src="https://yunxing.ydyx720.com/statics/wx/static/editor/tupian.png" style="width: 50rpx;height: 50rpx;" mode="widthFix"></image>
</view>
<!-- <view style="margin:8rpx 6rpx 0rpx 3rpx;">
<image @click="addvuetype(2)" src="https://yunxing.ydyx720.com/statics/wx/static/editor/shipin.png" style="width: 50rpx;height: 50rpx;" mode="widthFix"></image>
</view> -->
</view>
</view>
</view>
</template>
<script>
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 + '<p style="margin:5px auto;">'+arr.value+'</p>';
}
if(arr.type == 'img'){
info = info + '<p style="text-align:center;margin:5px auto;"><img style="width:100%;margin:auto;" src="'+arr.value+'"></p>';
}
// if(arr.type == 'video'){
// info = info + '<p style="text-align:center;margin:5px auto;"><video controls="controls" style="width:300px;margin:auto;" src="'+arr.value+'"></video></p>';
// }
}
}
if(info){
info = '<p style="text-align:center;margin:5px auto;">' + info + '</p>'
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);
}
});
}
}
};
</script>
