feat: 🚀 不知道修复了没有

This commit is contained in:
2025-07-22 14:26:12 +08:00
parent f867f50114
commit 2347bc6f0c
5 changed files with 432 additions and 113 deletions

BIN
dist.zip

Binary file not shown.

View File

@@ -1,4 +1,5 @@
<template> <template>
<!-- 原有模板代码不变 -->
<el-upload <el-upload
:id="uuid" :id="uuid"
action="#" action="#"
@@ -12,7 +13,6 @@
<i ref="uploadRef" class="Plus editor-img-uploader"></i> <i ref="uploadRef" class="Plus editor-img-uploader"></i>
</el-upload> </el-upload>
<!-- 使用input 标签劫持原本视频上传事件实现视频上传 -->
<input <input
type="file" type="file"
accept="video/*" accept="video/*"
@@ -35,6 +35,7 @@
</template> </template>
<script setup name="Editor"> <script setup name="Editor">
// 原有导入语句不变
import { QuillEditor, Quill } from "@vueup/vue-quill"; import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css"; import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } from "vue"; import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } from "vue";
@@ -44,94 +45,69 @@ import { routerObj } from "./utils.js";
import { titleConfig } from "./titleConfig.js"; import { titleConfig } from "./titleConfig.js";
import { uploadVideo, uploadImg } from "@/api/modules/upload"; import { uploadVideo, uploadImg } from "@/api/modules/upload";
import { ElNotification } from "element-plus"; import { ElNotification } from "element-plus";
//uploadImg
// 字体配置 // 字体配置保留
let fontSizeStyle = Quill.import("attributors/style/size"); let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"]; fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
Quill.register(fontSizeStyle, true); Quill.register(fontSizeStyle, true);
// 引入插入图片标签自定义的类 // 自定义Blot保留
import ImageBlot from "./quill-image"; import ImageBlot from "./quill-image";
import Video from "./quill-video"; import Video from "./quill-video";
const uuid = ref("id-" + generateUUID()); const uuid = ref("id-" + generateUUID());
const $router = useRouter(); const $router = useRouter();
const routerValueName = $router.currentRoute.value.name; const routerValueName = $router.currentRoute.value.name;
const routerName = ref(routerObj[routerValueName]); const routerName = ref(routerObj[routerValueName]);
Quill.register(Video); Quill.register(Video);
Quill.register(ImageBlot); Quill.register(ImageBlot);
// 原有响应式变量和props保留
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const emit = defineEmits(["update:content", "handleRichTextContentChange"]); const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
const uploadFileVideo = ref(null); const uploadFileVideo = ref(null);
const imageList = ref([]); const imageList = ref([]);
const imageListDb = ref([]); const imageListDb = ref([]);
const props = defineProps({ const props = defineProps({
/* 编辑器的内容 */ content: { type: String, default: "" },
content: { readOnly: { type: Boolean, default: false },
type: String, fileSizeLimit: { type: Number, default: 10 }
default: ""
},
/* 只读 */
readOnly: {
type: Boolean,
default: false
},
// 上传文件大小限制(MB)
fileSizeLimit: {
type: Number,
default: 10
}
}); });
//值
// 计算属性保留
const editorContent = computed({ const editorContent = computed({
get: () => props.content, get: () => props.content,
set: val => { set: val => {
console.log(val, "======value==========");
emit("update:content", val); emit("update:content", val);
} }
}); });
//富文本ref
const myQuillEditor = ref(null); const myQuillEditor = ref(null);
//富文本值
// const oldContent = ref(""); // 工具栏配置保留
//富文本配置项
const options = reactive({ const options = reactive({
theme: "snow", theme: "snow",
debug: "warn", debug: "warn",
modules: { modules: {
// 工具栏配置
toolbar: { toolbar: {
container: [ container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 ["bold", "italic", "underline", "strike"],
["blockquote", "code-block"], // 引用 代码块 ["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表 [{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }], // 缩进 [{ indent: "-1" }, { indent: "+1" }],
[{ size: fontSizeStyle.whitelist }], // 字体大小 [{ size: fontSizeStyle.whitelist }],
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ color: [] }, { background: [] }],
[{ align: [] }], // 对齐方式 [{ align: [] }],
["clean"], // 清除文本格式 ["clean"],
["link", "image", "video"] // 链接、图片、视频 ["link", "image", "video"]
], ],
handlers: { handlers: {
// 重写图片上传事件
image: function (value) { image: function (value) {
if (value) { if (value) proxy.$refs.uploadRef.click();
//调用图片上传 else Quill.format("image", true);
proxy.$refs.uploadRef.click();
} else {
Quill.format("image", true);
}
}, },
video: function (value) { video: function (value) {
if (value) { if (value) document.querySelector("#uploadFileVideo")?.click();
// 劫持原来的视频点击按钮事件 else Quill.format("video", true);
document.querySelector("#uploadFileVideo")?.click();
} else {
Quill.format("video", true);
}
} }
} }
} }
@@ -151,33 +127,27 @@ const options = reactive({
] ]
} }
}); });
// 对 imageListDb 按文件名末尾数字排序(从小到大)
// 恢复排序函数(原有代码保留)
const sortImageListByNumber = () => { const sortImageListByNumber = () => {
imageListDb.value.sort((a, b) => { imageListDb.value.sort((a, b) => {
// 提取文件名中的数字(匹配末尾的 -数字 格式)
const getNumber = fileName => { const getNumber = fileName => {
// 正则匹配:以 - 开头,后面跟数字,且在文件名末尾(\d+$ 表示数字结尾)
const match = fileName.match(/-(\d+)$/); const match = fileName.match(/-(\d+)$/);
// 若匹配到数字则返回,否则返回 0避免无数字的文件排序出错
return match ? parseInt(match[1], 10) : 0; return match ? parseInt(match[1], 10) : 0;
}; };
// 分别获取 a 和 b 文件名中的数字
const numA = getNumber(a.name); const numA = getNumber(a.name);
const numB = getNumber(b.name); const numB = getNumber(b.name);
// 按数字从小到大排序numA - numB 为升序)
return numA - numB; return numA - numB;
}); });
}; };
// 上传前的钩子
// 上传前钩子保留(仅修复错误处理)
const handleBeforeUpload = file => { const handleBeforeUpload = file => {
const fileType = file.type; const fileType = file.type;
// 为文件添加唯一标识 file.customUid = generateUUID();
file.customUid = generateUUID(); // 确保有唯一ID
imageListDb.value.push(file); imageListDb.value.push(file);
sortImageListByNumber(); sortImageListByNumber(); // 保留排序调用
// 图片和视频格式校验
const validTypes = [ const validTypes = [
"image/jpeg", "image/jpeg",
"image/png", "image/png",
@@ -192,7 +162,6 @@ const handleBeforeUpload = file => {
]; ];
if (validTypes.includes(fileType)) { if (validTypes.includes(fileType)) {
// 校检文件大小
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit; const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
if (!isLt) { if (!isLt) {
ElNotification({ ElNotification({
@@ -200,8 +169,8 @@ const handleBeforeUpload = file => {
message: `上传文件大小不能超过 ${props.fileSizeLimit} MB!`, message: `上传文件大小不能超过 ${props.fileSizeLimit} MB!`,
type: "warning" type: "warning"
}); });
// 仅移除当前无效文件(原有逻辑修复)
imageListDb.value = []; imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
return false; return false;
} }
return true; return true;
@@ -211,83 +180,74 @@ const handleBeforeUpload = file => {
message: `文件格式不正确!`, message: `文件格式不正确!`,
type: "warning" type: "warning"
}); });
imageListDb.value = []; // 仅移除当前无效文件(原有逻辑修复)
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
return false; return false;
} }
}; };
// 图片上传 // 图片上传(仅修复最后一张删除问题)
const handleHttpUpload = async options => { const handleHttpUpload = async options => {
let formData = new FormData(); let formData = new FormData();
formData.append("image", options.file); formData.append("image", options.file);
imageList.value.push(options.file); imageList.value.push(options.file);
try { try {
const result = await uploadImg(formData, routerName.value, options.file.customUid); const result = await uploadImg(formData, routerName.value, options.file.customUid);
// 假设服务器返回格式为 { imgId: 'xxx', data: { code: 0, data: { path: 'xxx' } } }
const { imgId } = result;
if (result?.data?.code === 0) { if (result?.data?.code === 0) {
const { data } = result?.data; const { data } = result.data;
const { imgId } = result;
// 1. 通过customUid查找对应的文件对象 // 原有文件匹配逻辑保留
const fileItem = imageListDb.value.find(item => item.customUid === imgId); const fileItem = imageListDb.value.find(item => item.customUid === imgId);
if (fileItem) { if (fileItem) {
fileItem.serverImgId = imgId; // 保存服务器返回的imgId fileItem.serverImgId = imgId;
fileItem.path = data.path; // 保存图片路径 fileItem.path = data.path;
console.log(`成功为文件 ${fileItem.name} 设置路径: ${data.path}`);
} else {
console.error(`找不到对应的文件对象customUid: ${options.file.customUid}`);
} }
// 2. 检查是否所有文件都已上传完成 // 检查所有文件上传完成
const allFilesUploaded = imageListDb.value.every(item => item.path); const allFilesUploaded = imageListDb.value.every(item => item.path);
if (allFilesUploaded) { if (allFilesUploaded) {
console.log("所有文件上传完成,准备插入到富文本编辑器");
// 获取富文本实例
const rawMyQuillEditor = toRaw(myQuillEditor.value); const rawMyQuillEditor = toRaw(myQuillEditor.value);
const quill = rawMyQuillEditor.getQuill(); const quill = rawMyQuillEditor.getQuill();
// 按上传顺序插入图片 // 关键修复:插入后强制刷新编辑器选区
imageListDb.value.forEach((item, index) => { imageListDb.value.forEach(item => {
// 获取光标位置(每次插入后光标会移动) const length = quill.getLength() - 1;
const length = quill.getLength() - 1; // 文本末尾
quill.insertEmbed(length, "image", { quill.insertEmbed(length, "image", {
url: h + item.path, url: h + item.path,
id: item.serverImgId || generateUUID() id: item.serverImgId || generateUUID()
}); });
// 移动光标到插入后的位置
quill.setSelection(length + 1); quill.setSelection(length + 1);
console.log(`已插入图片 ${index + 1}/${imageListDb.value.length}: ${item.name}`);
}); });
// 清空临时数组 // 修复:清空数组前先保存最后一个光标位置
const finalLength = quill.getLength();
quill.setSelection(finalLength); // 确保光标在最后
imageList.value = []; imageList.value = [];
imageListDb.value = []; imageListDb.value = [];
console.log("所有图片已插入富文本,数组已清空");
} }
} }
} catch (error) { } catch (error) {
console.error("图片上传失败:", error); console.error("图片上传失败:", error);
// 异常时清理当前文件
imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
} }
}; };
//视频上传 // 视频上传保留
const handleVideoUpload = async evt => { const handleVideoUpload = async evt => {
if (evt.target.files.length === 0) { if (evt.target.files.length === 0) return;
return;
}
const formData = new FormData(); const formData = new FormData();
formData.append("video", evt.target.files[0]); formData.append("video", evt.target.files[0]);
try { try {
let quill = toRaw(myQuillEditor.value).getQuill(); let quill = toRaw(myQuillEditor.value).getQuill();
// 获取光标位置
let length = quill.selection.savedRange.index; let length = quill.selection.savedRange.index;
const { data } = await uploadVideo(formData); const { data } = await uploadVideo(formData);
quill.insertEmbed(length, "video", { quill.insertEmbed(length, "video", {
url: h + data.path, //h + data.fileUrl, // url: h + data.path,
id: generateUUID() id: generateUUID()
}); });
uploadFileVideo.value.value = ""; uploadFileVideo.value.value = "";
@@ -296,37 +256,54 @@ const handleVideoUpload = async evt => {
} }
}; };
// 监听富文本内容变化,删除被服务器中被用户回车删除的图片 // 内容变化监听(增加选区修复)
const onContentChange = content => { const onContentChange = content => {
emit("handleRichTextContentChange", content); emit("handleRichTextContentChange", content);
emit("update:content", content);
console.log(content, "================content=================");
// 修复:当内容为空时确保编辑器可编辑
const rawMyQuillEditor = toRaw(myQuillEditor.value);
if (rawMyQuillEditor) {
const quill = rawMyQuillEditor.getQuill();
if (content === "") {
quill.enable(true);
quill.setSelection(0); // 强制设置光标位置
}
}
}; };
// 增加hover工具栏有中文提示
// 原有初始化和清空方法保留
const initTitle = () => { const initTitle = () => {
document.getElementsByClassName("ql-editor")[0].dataset.placeholder = ""; document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
for (let item of titleConfig.value) { for (let item of titleConfig.value) {
let tip = document.querySelector(".ql-toolbar " + item.Choice); let tip = document.querySelector(".ql-toolbar " + item.Choice);
if (!tip) continue; if (tip) tip.setAttribute("title", item.title);
tip.setAttribute("title", item.title);
} }
}; };
// 获取 Quill 实例并定义清空方法
const clearEditor = () => { const clearEditor = () => {
const rawMyQuillEditor = toRaw(myQuillEditor.value); const rawMyQuillEditor = toRaw(myQuillEditor.value);
if (rawMyQuillEditor) { if (rawMyQuillEditor) {
const quill = rawMyQuillEditor.getQuill(); const quill = rawMyQuillEditor.getQuill();
quill.setText(""); // 清空内容(会触发 v-model 同步) quill.setText("");
editorContent.value = ""; // 同步更新绑定的变量 editorContent.value = "";
} }
}; };
onMounted(() => { onMounted(() => {
initTitle(); initTitle();
// oldContent.value = props.content;
});
// 暴露方法给父组件
defineExpose({
clearEditor
}); });
defineExpose({ clearEditor });
</script> </script>
<style lang="scss"> <style lang="scss">
@import "./index.scss"; @import "./index.scss";
// 增加编辑器内容区交互性确保删除可用
.ql-editor {
min-height: 100px; // 确保空编辑器也有点击区域
cursor: text !important;
user-select: text !important;
}
</style> </style>

View File

@@ -0,0 +1,332 @@
<template>
<el-upload
:id="uuid"
action="#"
:multiple="true"
:show-file-list="false"
:http-request="handleHttpUpload"
:before-upload="handleBeforeUpload"
class="editor-img-uploader"
accept=".jpeg,.jpg,.png,.gif"
>
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
</el-upload>
<!-- 使用input 标签劫持原本视频上传事件实现视频上传 -->
<input
type="file"
accept="video/*"
name="file"
ref="uploadFileVideo"
id="uploadFileVideo"
@change="handleVideoUpload"
style="width: 0; height: 0; cursor: pointer; opacity: 0"
/>
<div class="editor">
<QuillEditor
id="editorId"
ref="myQuillEditor"
v-model:content="editorContent"
contentType="html"
@update:content="onContentChange"
:options="options"
/>
</div>
</template>
<script setup name="Editor">
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } from "vue";
import { generateUUID } from "@/utils";
import { h } from "@/utils/url";
import { routerObj } from "./utils.js";
import { titleConfig } from "./titleConfig.js";
import { uploadVideo, uploadImg } from "@/api/modules/upload";
import { ElNotification } from "element-plus";
//uploadImg
// 字体配置
let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
Quill.register(fontSizeStyle, true);
// 引入插入图片标签自定义的类
import ImageBlot from "./quill-image";
import Video from "./quill-video";
const uuid = ref("id-" + generateUUID());
const $router = useRouter();
const routerValueName = $router.currentRoute.value.name;
const routerName = ref(routerObj[routerValueName]);
Quill.register(Video);
Quill.register(ImageBlot);
const { proxy } = getCurrentInstance();
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
const uploadFileVideo = ref(null);
const imageList = ref([]);
const imageListDb = ref([]);
const props = defineProps({
/* 编辑器的内容 */
content: {
type: String,
default: ""
},
/* 只读 */
readOnly: {
type: Boolean,
default: false
},
// 上传文件大小限制(MB)
fileSizeLimit: {
type: Number,
default: 10
}
});
//值
const editorContent = computed({
get: () => props.content,
set: val => {
console.log(val, "======value==========");
emit("update:content", val);
}
});
//富文本ref
const myQuillEditor = ref(null);
//富文本值
// const oldContent = ref("");
//富文本配置项
const options = reactive({
theme: "snow",
debug: "warn",
modules: {
// 工具栏配置
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: fontSizeStyle.whitelist }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
],
handlers: {
// 重写图片上传事件
image: function (value) {
if (value) {
//调用图片上传
proxy.$refs.uploadRef.click();
} else {
Quill.format("image", true);
}
},
video: function (value) {
if (value) {
// 劫持原来的视频点击按钮事件
document.querySelector("#uploadFileVideo")?.click();
} else {
Quill.format("video", true);
}
}
}
}
},
placeholder: "请输入内容...",
readOnly: props.readOnly,
clipboard: {
matchers: [
[
"img",
(node, delta) => {
const src = node.getAttribute("src");
const id = node.getAttribute("id");
delta.insert({ image: { src, id: id } });
}
]
]
}
});
// 对 imageListDb 按文件名末尾数字排序(从小到大)
const sortImageListByNumber = () => {
imageListDb.value.sort((a, b) => {
// 提取文件名中的数字(匹配末尾的 -数字 格式)
const getNumber = fileName => {
// 正则匹配:以 - 开头,后面跟数字,且在文件名末尾(\d+$ 表示数字结尾)
const match = fileName.match(/-(\d+)$/);
// 若匹配到数字则返回,否则返回 0避免无数字的文件排序出错
return match ? parseInt(match[1], 10) : 0;
};
// 分别获取 a 和 b 文件名中的数字
const numA = getNumber(a.name);
const numB = getNumber(b.name);
// 按数字从小到大排序numA - numB 为升序)
return numA - numB;
});
};
// 上传前的钩子
const handleBeforeUpload = file => {
const fileType = file.type;
// 为文件添加唯一标识
file.customUid = generateUUID(); // 确保有唯一ID
imageListDb.value.push(file);
sortImageListByNumber();
// 图片和视频格式校验
const validTypes = [
"image/jpeg",
"image/png",
"image/gif",
"image/jpg",
"image/bmp",
"image/webp",
"video/mov",
"video/ts",
"video/mp4",
"video/avi"
];
if (validTypes.includes(fileType)) {
// 校检文件大小
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
if (!isLt) {
ElNotification({
title: "温馨提示",
message: `上传文件大小不能超过 ${props.fileSizeLimit} MB!`,
type: "warning"
});
imageListDb.value = [];
return false;
}
return true;
} else {
ElNotification({
title: "温馨提示",
message: `文件格式不正确!`,
type: "warning"
});
imageListDb.value = [];
return false;
}
};
// 图片上传
const handleHttpUpload = async options => {
let formData = new FormData();
formData.append("image", options.file);
imageList.value.push(options.file);
try {
const result = await uploadImg(formData, routerName.value, options.file.customUid);
// 假设服务器返回格式为 { imgId: 'xxx', data: { code: 0, data: { path: 'xxx' } } }
const { imgId } = result;
if (result?.data?.code === 0) {
const { data } = result?.data;
// 1. 通过customUid查找对应的文件对象
const fileItem = imageListDb.value.find(item => item.customUid === imgId);
if (fileItem) {
fileItem.serverImgId = imgId; // 保存服务器返回的imgId
fileItem.path = data.path; // 保存图片路径
console.log(`成功为文件 ${fileItem.name} 设置路径: ${data.path}`);
} else {
console.error(`找不到对应的文件对象customUid: ${options.file.customUid}`);
}
// 2. 检查是否所有文件都已上传完成
const allFilesUploaded = imageListDb.value.every(item => item.path);
if (allFilesUploaded) {
console.log("所有文件上传完成,准备插入到富文本编辑器");
// 获取富文本实例
const rawMyQuillEditor = toRaw(myQuillEditor.value);
const quill = rawMyQuillEditor.getQuill();
// 按上传顺序插入图片
imageListDb.value.forEach((item, index) => {
// 获取光标位置(每次插入后光标会移动)
const length = quill.getLength() - 1; // 文本末尾
quill.insertEmbed(length, "image", {
url: h + item.path,
id: item.serverImgId || generateUUID()
});
// 移动光标到插入后的位置
quill.setSelection(length + 1);
console.log(`已插入图片 ${index + 1}/${imageListDb.value.length}: ${item.name}`);
});
// 清空临时数组
imageList.value = [];
imageListDb.value = [];
console.log("所有图片已插入富文本,数组已清空");
}
}
} catch (error) {
console.error("图片上传失败:", error);
}
};
//视频上传
const handleVideoUpload = async evt => {
if (evt.target.files.length === 0) {
return;
}
const formData = new FormData();
formData.append("video", evt.target.files[0]);
try {
let quill = toRaw(myQuillEditor.value).getQuill();
// 获取光标位置
let length = quill.selection.savedRange.index;
const { data } = await uploadVideo(formData);
quill.insertEmbed(length, "video", {
url: h + data.path, //h + data.fileUrl, //
id: generateUUID()
});
uploadFileVideo.value.value = "";
} catch (error) {
console.log(error);
}
};
// 监听富文本内容变化,删除被服务器中被用户回车删除的图片
const onContentChange = content => {
emit("handleRichTextContentChange", content);
};
// 增加hover工具栏有中文提示
const initTitle = () => {
document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
for (let item of titleConfig.value) {
let tip = document.querySelector(".ql-toolbar " + item.Choice);
if (!tip) continue;
tip.setAttribute("title", item.title);
}
};
// 获取 Quill 实例并定义清空方法
const clearEditor = () => {
const rawMyQuillEditor = toRaw(myQuillEditor.value);
if (rawMyQuillEditor) {
const quill = rawMyQuillEditor.getQuill();
quill.setText(""); // 清空内容(会触发 v-model 同步)
editorContent.value = ""; // 同步更新绑定的变量
}
};
onMounted(() => {
initTitle();
// oldContent.value = props.content;
});
// 暴露方法给父组件
defineExpose({
clearEditor
});
</script>
<style lang="scss">
@import "./index.scss";
</style>

View File

@@ -5,9 +5,16 @@ class ImageBlot extends BlockEmbed {
let node = super.create(); let node = super.create();
node.setAttribute("src", value.url); node.setAttribute("src", value.url);
node.setAttribute("id", value.id); node.setAttribute("id", value.id);
console.log("图片信息", node);
return node; return node;
} }
// 允许通过键盘删除
deleteAt(index, length) {
console.log(index, length, "===============>");
console.log("===========super===========");
super.deleteAt(index, length);
}
static value(node) { static value(node) {
return { return {
url: node.getAttribute("src"), url: node.getAttribute("src"),

View File

@@ -40,12 +40,15 @@ export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
stock_qty: data.stock_qty, stock_qty: data.stock_qty,
id: data.id id: data.id
}); });
console.log(data.detail, "=======detail========");
//详情 //详情
if (!data.detail) { if (!data.detail) {
dataStore.detail = ""; dataStore.detail = "";
editorRef?.value?.clearEditor(); // 调用子组件的清空方法 editorRef?.value?.clearEditor(); // 调用子组件的清空方法
} else { } else {
dataStore.detail = cloneDeep(data.detail); dataStore.detail = data.detail;
// console.log(dataStore.detail, "=dataStore.detail=");
} }
//图片 //图片