hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设置富文本编辑器的上传配置

Browse Source
This commit is contained in:
Double-_-Z 2024-11-01 01:10:27 +08:00
parent be2914146e
commit 48d3683266
2 changed files with 54 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/editor/index.vue
View File

@ -18,6 +18,8 @@ import '@wangeditor/editor/dist/css/style.css';
import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue';
import { IDomEditor } from '@wangeditor/editor';
import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
import { articleApi } from '/@/api/article';
import { ElMessage } from 'element-plus';
// 定义父组件传过来的值
const props = defineProps({
@ -56,10 +58,54 @@ const editorRef = shallowRef();
const state = reactive({
editorConfig: {
placeholder: props.placeholder,
MENU_CONF:{}
},
editorVal: props.getHtml,
});
// 引入 api 请求接口
const artApi = articleApi();
// 自定义插入图片、视频方法类型
type InsertImgFnType = (url: string, alt: string, href: string) => void;
type InsertVideoFnType = (url: string, poster: string) => void
// 基本路径
const viteUrl = import.meta.env.VITE_API_URL;
// 图片上传配置
state.editorConfig.MENU_CONF['uploadImage'] = {
// 自定义插入图片
async customUpload(file: File, insertFn: InsertImgFnType) {
const formdata = new FormData();
formdata.append('file', file);
if(file.type.includes('image')){
let res = await artApi.uploadFile(formdata);
if(res?.success) insertFn(encodeURI(viteUrl+res.data.path), res.data.title, '#')
else ElMessage.error('图片上传失败！');
}else{
ElMessage.error('上传图片格式错误！');
}
},
};
// 视频上传配置
state.editorConfig.MENU_CONF['uploadVideo'] = {
// 自定义插入图片
async customUpload(file: File, insertFn: InsertVideoFnType) {
const formdata = new FormData();
formdata.append('file', file);
if(file.type.includes('video')){
let res = await artApi.uploadFile(formdata);
if(res?.success) insertFn(encodeURI(viteUrl+res.data.path), '')
else ElMessage.error('视频上传失败！');
}else{
ElMessage.error('上传视频格式错误！');
}
},
}
// 编辑器回调函数
const handleCreated = (editor: IDomEditor) => {
editorRef.value = editor;

12
src/views/article/component/upload.vue
View File

@ -306,10 +306,14 @@ const handleDownload = (file: UploadFile) => {
// 封面图片更改
const handleUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
const file:any = uploadFile.raw;
state.coverFile = file;
state.coverHide = true;
console.log(uploadRef.value)
if(uploadFile.raw.type.includes('image')){
const file:any = uploadFile.raw;
state.coverFile = file;
state.coverHide = true;
}else{
ElMessage.error('请上传图片文件！');
uploadRef.value.clearFiles();
}
}
onMounted(() => {