zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-08-31 22:42:03 +08:00
parent 1a16344cf4 3272bbd888
commit 1c6bbffc3b
15 changed files with 418 additions and 574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/ypModel/index.vue
View File

@ -7,8 +7,8 @@
<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>
<!-- <el-button type="primary">暂存</el-button> -->
<el-button type="primary" @click="downloadWithStyles">下载</el-button>
<el-button type="primary" @click="close">取消</el-button>
</template>
</el-dialog>
@ -19,6 +19,7 @@ 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 { saveAs } from 'file-saver';
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { ref, shallowRef, onBeforeUnmount, defineEmits, defineProps, watch } from "vue";
const props = defineProps({
@ -46,7 +47,7 @@ const mode = "default";
const toolbarConfig = {
excludeKeys: ["blockquote", "codeBlock"] //清除不必要的工具，引用和代码块
};
const emits = defineEmits(["update:textContent", "changeFn"]);
const emits = defineEmits(["update:textContent", "changeFn","update:modelValue"]);
//编辑器配置
const editorConfig = {
withCredentials: true, //允许跨域
@ -86,7 +87,6 @@ const handleCreated = (editor) => {
};
//内容发生变化
const handChange = (editor) => {
console.log(editor.getHtml(),'====editor.getHtml()');
// 判断是否是一个空段落，是空就传空文本
if (editor.isEmpty()) {
emits("changeFn", editor.getText());
@ -94,11 +94,34 @@ const handChange = (editor) => {
emits("changeFn", editor.getHtml());
}
};
const close = () => {
emits("update:modelValue", false)
}
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor) editor.destroy();
});
// 带样式的下载方法
const downloadWithStyles = () => {
const wordDocument = `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>富文本导出</title>
</head>
<body>
${props.textContent}
</body>
</html>
`;
const blob = new Blob([wordDocument], {
type: 'application/msword'
});
saveAs(blob, 'styled-document.doc');
};
</script>
<style lang="scss" scoped>