Files
sgxt_web/src/components/ypModel/index.vue

114 lines
3.3 KiB
Vue
Raw Normal View History

2025-07-22 17:20:57 +08:00
<template>
<el-dialog v-model="modelValue" center width="1000px" :destroy-on-close="true" title="报告模板" @close="close" :close-on-click-modal="false">
<div class="cntBox">
<!-- 工具栏 -->
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<!-- 编辑器 -->
<Editor :style="`height: ${props.heightNumber}px; overflow-y: hidden`" v-model="textContent" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handChange" />
</div>
<template #footer>
<el-button type="primary">暂存</el-button>
<el-button type="primary">下载</el-button>
2025-07-22 18:00:05 +08:00
<el-button type="primary" @click="close">取消</el-button>
2025-07-22 17:20:57 +08:00
</template>
</el-dialog>
</template>
<script setup>
import { compressImage } from "@/utils/tools.js";
import "@wangeditor/editor/dist/css/style.css";
import { qcckPost } from "@/api/qcckApi.js";
import { ElMessage } from "element-plus";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { ref, shallowRef, onBeforeUnmount, defineEmits, defineProps, watch } from "vue";
const props = defineProps({
modelValue:{
type:Boolean,
default:false
},
// 编辑器内容
textContent: {
type: String,
default: ""
},
placeholder: {
type: String,
default: "请输入内容。。。。"
},
heightNumber: {
type: Number,
default: 448
}
});
const editorRef = shallowRef();
const mode = "default";
//工具配置
const toolbarConfig = {
excludeKeys: ["blockquote", "codeBlock"] //清除不必要的工具,引用和代码块
};
const emits = defineEmits(["update:textContent", "changeFn"]);
//编辑器配置
const editorConfig = {
withCredentials: true, //允许跨域
placeholder: props.placeholder, //提示语
MENU_CONF: {
uploadImage: {
// 自定义上传图片
async customUpload(file, insertFn) {
let fileBlob = await compressImage(file);
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
if (fileData.size > 2 * 1024 * 1024) {
ElMessage({ message: "图片超过2MB", type: "success" });
} else {
await uploadFn(fileData, insertFn);
}
}
},
uploadVideo: {
// 自定义上传视频
async customUpload(file, insertFn) {
await uploadFn(file, insertFn);
}
}
}
};
const uploadFn = (file, insertFn) => {
let param = new FormData();
param.append("file", file);
qcckPost(param, "/mosty-base/minio/image/upload").then((res) => {
insertFn(res);
});
};
//编辑器创建成功
const handleCreated = (editor) => {
editorRef.value = editor;
};
//内容发生变化
const handChange = (editor) => {
console.log(editor.getHtml(),'====editor.getHtml()');
// 判断是否是一个空段落,是空就传空文本
if (editor.isEmpty()) {
emits("changeFn", editor.getText());
} else {
emits("changeFn", editor.getHtml());
}
};
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor) editor.destroy();
});
</script>
<style lang="scss" scoped>
.cntBox{
height: 60vh;
padding: 8px;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
border: 1px dashed #e9e9e9;
}
</style>