<template>
<div>
<el
-form
ref="formRef"
:model="formData"
:rules="formRules"
label
-width="100px"
label
-position="top"
>
<el
-form
-item label="标题" prop="title">
<el
-input v
-model="formData
.title" placeholder="请输入标题" />
</el
-form
-item>
<el
-form
-item label="相关博客地址" prop="httpurl">
<el
-input v
-model="formData
.httpurl" placeholder="相关博客地址" />
</el
-form
-item>
<el
-form
-item label="简述" prop="easytitle">
<el
-input v
-model="formData
.easytitle" placeholder="简述" />
</el
-form
-item>
<div>
<QuillEditor
ref="quillEditor"
v
-model:content="formData
.message"
contentType="
html"
:options="editorOptions"
@blur="onEditorBlur"
/>
</div>
</el
-form>
<template #footer>
<span class="dialog
-footer">
<el
-button @click="dialogVisible = false">取消</el
-button>
<el
-button type="primary" @click="submitForm" :loading="submitting">
{{ submitting ? "提交中
..." : "确认添加" }}
</el
-button>
</span>
</template>
</div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { QuillEditor } from "@vueup/vue
-quill";
import "@vueup/vue
-quill/dist/vue
-quill
.snow
.css";
import { useUserStore } from "
../
../
../store/user
.js";
// 用于保存 Quill 编辑器组件实例
const quillEditor = ref();
//表单
引用
const formRef = ref(null);
//表单数据模型
const formData = reactive({
tecid: "",
title: "",
message: "",
httpurl: "",
easytitle: "",
});
//这里添加相关规则
const formRules = reactive([]);
// 图片上传处理函数
const imageHandler = async () => {
//创建一个隐藏的<input元素>
const input = document
.createElement("input");
input
.setAttribute("type", "file");
//且只接收图片
input
.setAttribute("accept", "image/*");
input
.click();
input
.onchange = async () => {
//获取选择的第一个文件
const file = input
.files[0];
//如果文件不存在，即为null，undefined或者空值时，直接结束函数
if (!file) {
return;
}
try {
// ✅ 调用后端图片上传接口
const formData = new FormData();
formData
.append("file", file);
formData
.append("fileType", "1");
const response = await api
.fileUpload(formData);
if (response
.data
.code ==
200) {
// ✅ 使用组件 ref 获取 Quill 实例
const quill = quillEditor
.value
.getQuill();
const range = quill
.getSelection(true);
// ✅ 插入图片
const wzpath = useUserStore
.nginxBasePath + response
.data
.data
.filePath;
console
.log("完整访问路径：" + wzpath);
quill
.insertEmbed(range
.index, "image", wzpath);
quill
.setSelection(range
.index + 1);
}
} catch (error) {
console
.error("图片上传失败:", error);
}
};
};
// 编辑器配置选项
const editorOptions = ref({
modules: {
toolbar: {
container: [
["bold", "italic", "underline", "strike"],
[{ list: "ordered" }, { list: "bullet" }],
["link", "image", "video"],
["clean"],
],
handlers: {
// 自定义图片上传处理
image: imageHandler,
},
},
},
placeholder: "请输入内容
...",
theme: "snow",
});
// 编辑器失焦事件
const onEditorBlur = (event) => {
console
.log("编辑器内容:", event
.value);
};
</script>
<style scoped lang="s
css">
/* 弹窗相关
css */
.el
-button {
margin: 10px;
}
/* 自定义弹窗样式 */
:deep(
.el
-dialog) {
border
-radius: 1
2px;
width: 100%;
box
-shadow: 0 4px 1
2px rgba(0, 0, 0, 0
.15);
}
:deep(
.el
-dialog__header) {
border
-bottom: 1px solid #eee;
padding: 15px
20px;
}
:deep(
.el
-dialog__body) {
padding:
20px;
}
:deep(
.el
-form
-item) {
margin
-bottom: 18px;
}
</style>
以上是一个vue文件，这个文件报错如下：[vite]
Internal server error: Codegen node is missing for element/if/for node
. Apply appropriate transforms first
.
Plugin: vite:vue
File: D:/HBuilder/Space/VUE
3-PROJECT/vite
-project/src/components/editor/SmallTecAdd
.vue，如何解决
扫一扫
1512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
