在vue3中下载wangEditor5插件,为插件配置上传附件功能,二次封装成组件复用在页面中,实时获取用户更新后的数据
html结构:
<template>
<div
style="border: 1px solid #ccc; max-width: calc(100vw - 355px)"
v-loading="loading"
element-loading-text="文件上传中..."
>
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
:style="{ height: height + 'px', overflowY: 'hidden' }"
class="EditorDom"
v-model="editValue"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
@onChange="handleChange"
/>
</div>
</template>
js基础引入代码:
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { Boot } from "@wangeditor/editor";
import attachmentModule from "@wangeditor/plugin-upload-attachment";
const props = defineProps({
height: {
type: Number,
default: 600,
},
mode: {
default: "default",
type: String,
},
editorConfig: {
default: () => ({
placeholder: "请输入内容...",
MENU_CONF: {},
}),
type: Object,
},
modelValue: {
required: true,
type: String,
},
knwlgId: {
required: true,
type: String,
},
});
const emits = defineEmits(["update:modelValue", "setHtml"]);
// 注册。要在创建编辑器之前注册,且只能注册一次,不可重复注册。
if (Boot.plugins.length < 13) {
//判断如果已经插入进去,不在二次插入
Boot.registerModule(attachmentModule);
}
const toolbarConfig = {
insertKeys: {
index: 0, // 自定义插入的位置
keys: ["uploadAttachment"], // “上传附件”菜单
},
};
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();
const editValue = computed({
get() {
return props.modelValue;
},
set(value) {
emits("update:modelValue", value);
},
});
const handleCreated = (editor) => {
editorRef.value = editor; // 记录 editor 实例,重要!
};
// 内容改变
const handleChange = (editor) => {
emits("setHtml", editor.getText(), editor.getHtml());
};
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
if (editorRef.value) {
editorRef.value.destroy();
}
});
//销毁dom
const distoryEditor = () => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
};
//实时更新数据
const setWangContent = (val) => {
editorRef.value.setHtml(val);
};
图片上传:
// 图片上传设置
props.editorConfig.MENU_CONF["uploadImage"] = {
// 服务端地址
maxNumberOfFiles: 1,
allowedFileTypes: ["image/*"],
async customUpload(file, insertFn) {
if (!file.type.includes("image")) {
return proxy.$modal.msgError("请上传图片格式的文件");
}
if (file.size / 1024 / 1024 > 200) {
return proxy.$modal.msgError("请上传200M以内的图片!");
}
const formData = new FormData();
formData.append("file", file);
loading.value = true;
uploadImg(props.knwlgId, formData, formData)
.then((res) => {
loading.value = false;
insertFn(
import.meta.env.VITE_APP_BASE_API +
res.data.imgId
);
})
.catch(() => {
loading.value = false;
});
},
};
视频上传:
// 视频上传
props.editorConfig.MENU_CONF["uploadVideo"] = {
// 最多可上传几个文件,默认为 5
maxNumberOfFiles: 1,
async customUpload(file, insertFn) {
// console.log(file, "customUpload");
if (!file.type.includes("video")) {
return proxy.$modal.msgError("请上传视频格式的文件!");
} else if (file.size / 1024 / 1024 > 200) {
return proxy.$modal.msgError("请上传200M以内的文件!");
}
// file 即选中的文件
// 自己实现上传,并得到视频 url poster
// 最后插入视频
const formData = new FormData();
formData.append("file", file);
loading.value = true;
uploadImg(formData)
.then((res) => {
loading.value = false;
insertFn(res.data.url);
})
.catch(() => {
loading.value = false;
});
},
};
附件上传:
// 附件上传
(props.editorConfig.MENU_CONF["uploadAttachment"] = {
async customUpload(file, insertFn) {
console.log(file, "uploadAttachment");
if (file.size / 1024 / 1024 > 200) {
return proxy.$modal.msgError("请上传200M以内的附件!");
}
const formData = new FormData();
formData.append("file", file);
loading.value = true;
uploadImg(formData)
.then((res) => {
loading.value = false;
insertFn(res.data.name, res.data.url);
})
.catch(() => {
loading.value = false;
});
},
});