<template>
<div>
<vue-ueditor-wrap
v-model="msg"
:config="editorConfig"
@beforeInit="addImageButton"
></vue-ueditor-wrap>
<a-modal
title="上传图片"
:visible="ifShowUploadImgDialog"
@cancel="ifShowUploadImgDialog = false"
>
<a-form-model style="display: flex" >
<a-form-item style="display: flex">
<template slot="label">
<span style="font-size: 14px;color: #595959;">图片</span>
</template>
<a-upload
:show-upload-list="false"
:customRequest="customRequestImg"
:multiple="false"
list-type="picture-card"
>
<img v-if="apiDataUrl" style="width: 102px;height:102px;object-fit:cover;" :src="apiDataUrl" alt="avatar" />
<div v-else>
<a-icon type="plus" />
<div class="ant-upload-text">
上传图片
</div>
</div>
</a-upload>
</a-form-item>
<div style="margin-left: 100px;">
<a-form-item style="display: flex">
<template slot="label">
<span style="font-size: 14px;color: #595959;">宽</span>
</template>
<a-input-number :min="0" addon-after="px" v-model="file.w"/>
</a-form-item>
<a-form-item style="display: flex">
<template slot="label">
<span style="font-size: 14px;color: #595959;">高</span>
</template>
<a-input-number :min="0" v-model="file.h">
</a-input-number>
</a-form-item>
</div>
</a-form-model>
<template template slot="footer">
<a-button type="default" @click="ifShowUploadImgDialog = false">取消</a-button>
<a-button type="primary" @click="sureUpImgFn">确定</a-button>
</template>
</a-modal>
<a-modal
title="上传视频"
width="520px"
:visible="ifShowUploadVideoDialog"
@cancel="ifShowUploadVideoDialog = false"
>
<a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item >
<template slot="label">
<span style="font-size: 14px;color: #595959;">视频</span>
</template>
<a-upload
accept=".mp4,.ogg,.webm"
:customRequest="customRequestVideo"
:multiple="false"
>
<a-button> <a-icon type="upload" /> 上传视频 </a-button>
</a-upload>
</a-form-item>
<a-form-item >
<template slot="label">
<span style="font-size: 14px;color: #595959;">宽</span>
</template>
<a-input-number :min="0" addon-after="px" v-model="file.w"/>
</a-form-item>
<a-form-item>
<template slot="label">
<span style="font-size: 14px;color: #595959;">高</span>
</template>
<a-input-number :min="0" v-model="file.h">
</a-input-number>
</a-form-item>
</a-form-model>
<template template slot="footer">
<a-button type="default" @click="ifShowUploadVideoDialog = false">取消</a-button>
<a-button type="primary" @click="sureUpVideoFn">确定</a-button>
</template>
</a-modal>
</div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
import {
uploadArticleOrVideo,uploadVideo} from '@/api/content/content.js';
export default {
name: "MyEditor",
props : ['ifDisabled','content','height'],
data() {
return {
editorConfig: {
autoHeightEnabled: false, //编译器不自动被内容撑高
initialFrameHeight: 650, //初始容器高度
initialFrameWith: "100%",
readonly : false,
UEDITOR_HOME_URL: "./UE/", //UEditor资源文件的存放路径
allowDivTransToP: false, // 阻止DIV 自动过滤为P标签
// serverUrl: 'http://192.168.43.89:3000/ueconfig' // //ueditor.szcloudplus.com/cos
},
msg : '',
editorInstance : {
},
ifShowUploadImgDialog : false,
ifShowUploadVideoDialog : false,
editor : null,
apiDataUrl : null,
labelCol: {
span: 5},
wrapperCol: {
span: 15 },
file : {
w : 100,
h : 100
}
};
},
components : {
VueUeditorWrap
},
watch : {
content : {
handler() {
this.msg = this.content;
},
immediate:true
},
msg() {
this.$emit('getEditContent',this.msg)
}
},
methods : {
readyFn(editorInstance) {
this.editorInstance=editorInstance
},
addImageButton(editorId) {
let that = this;
window.UE.registerUI("autoimg", (editor, uname) => {
const btnImg = new window.UE.ui.Button({
name: 'my-img',
title: '上传图片',
onclick: function(){
that.editor = editor;
that.ifShowUploadImgDialog = true;
}
});
return btnImg
});
window.UE.registerUI("autovideo", (editor, uname) => {
const btnVideo = new window.UE.ui.Button({
name: 'my-video',
title: '上传视频',
onclick: function(){
that.editor = editor;
that.ifShowUploadVideoDialog = true;
}
});
return btnVideo
});
},
customRequestImg(data) {
const formData = new FormData();
formData.append('file',data.file);
uploadArticleOrVideo(formData).then(res=>{
if(res.data.success) {
this.apiDataUrl = window.customizeConfig.proposed === "NJ" ? window.customizeConfig.minioUrl + JSON.parse(res.data.data).url :
JSON.parse(res.data.data).url;
} else {
this.$message.error('上传失败')
}
})
},
customRequestVideo(data) {
const formData = new FormData();
formData.append('file',data.file);
uploadVideo(formData).then(res=>{
data.onSuccess(res, data.file);
if(res.data.success) {
this.apiDataUrl = window.customizeConfig.proposed === "NJ" ? window.customizeConfig.minioUrl + JSON.parse(res.data.data).url :
JSON.parse(res.data.data).url;
} else {
this.$message.error('上传失败')
}
})
},
sureUpImgFn() {
if(this.apiDataUrl) {
this.editor.execCommand('insertimage', {
src:this.apiDataUrl,
_src: this.apiDataUrl,
height : this.file.h,
width : this.file.w
});
this.ifShowUploadImgDialog = false;
} else {
this.$message.warning("暂无上传文件")
}
},
sureUpVideoFn() {
if(this.apiDataUrl) {
if(this.file.h && this.file.w) {
this.editor.execCommand('insertHTML',`<video height=${
this.file.h} width=${
this.file.w} src="${
this.apiDataUrl}" autoplay loop controls="controls"></video>`);
} else {
this.editor.execCommand('insertHTML',`<video src="${
this.apiDataUrl}" autoplay loop controls="controls"></video>`);
}
this.ifShowUploadVideoDialog = false;
} else {
this.$message.warning("暂无上传文件")
}
}
},
created() {
this.editorConfig.readonly = this.ifDisabled;
}
};
</script>
<style>
.tox-notifications-container {
display: none;
}
.tox-statusbar {
display: none !important;
}
.edui-button.edui-for-my-img .edui-button-wrap .edui-button-body .edui-icon {
background-image: url("~@/assets/img/ue/upImg.png") !important;
background-size: contain;
}
.edui-button.edui-for-my-video .edui-button-wrap .edui-button-body .edui-icon {
background-image: url("~@/assets/img/ue/upVideo.png") !important;
background-size: contain;
}
textarea {
display:none;
}
</style>
ueditor.vue
猜你喜欢
转载自blog.csdn.net/weixin_44224921/article/details/130102360
今日推荐
周排行