|
@@ -14,7 +14,6 @@ import { quillEditor } from "vue-quill-editor";
|
|
|
import "quill/dist/quill.core.css";
|
|
|
import "quill/dist/quill.snow.css";
|
|
|
import "quill/dist/quill.bubble.css";
|
|
|
-import Quill from "quill";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
@@ -37,12 +36,13 @@ export default {
|
|
|
{ indent: "-1" },
|
|
|
{ indent: "+1" },
|
|
|
],
|
|
|
- ["link", "image", "video"],
|
|
|
+ ["link", "image", "video", "custom-file"], // 添加自定义文件图标
|
|
|
["clean"],
|
|
|
],
|
|
|
handlers: {
|
|
|
- image: this.imageHandler,
|
|
|
+ // image: this.imageHandler,
|
|
|
video: this.videoHandler,
|
|
|
+ "custom-file": this.fileHandler, // 自定义文件处理函数
|
|
|
},
|
|
|
},
|
|
|
},
|
|
@@ -51,7 +51,7 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
onEditorReady(editor) {
|
|
|
- // Any additional setup for the editor can be done here
|
|
|
+ console.log(editor, "editor");
|
|
|
},
|
|
|
imageHandler() {
|
|
|
const input = document.createElement("input");
|
|
@@ -64,16 +64,18 @@ export default {
|
|
|
if (file) {
|
|
|
const formData = new FormData();
|
|
|
formData.append("file", file);
|
|
|
-
|
|
|
- try {
|
|
|
- const response = await this.uploadImage(formData);
|
|
|
- const url = response.data.url; // 根据你的实际响应数据结构
|
|
|
- const quill = this.$refs.quillEditor.quill;
|
|
|
- const range = quill.getSelection();
|
|
|
- quill.insertEmbed(range.index, "image", url);
|
|
|
- } catch (error) {
|
|
|
- console.error("Image upload failed", error);
|
|
|
- }
|
|
|
+ const quill = this.$refs.quillEditor.quill;
|
|
|
+ const range = quill.getSelection();
|
|
|
+ quill.insertEmbed(range.index, "image", formData);
|
|
|
+ // try {
|
|
|
+ // const response = await this.uploadImage(formData);
|
|
|
+ // const url = response.data.url; // 根据你的实际响应数据结构
|
|
|
+ // const quill = this.$refs.quillEditor.quill;
|
|
|
+ // const range = quill.getSelection();
|
|
|
+ // quill.insertEmbed(range.index, "image", url);
|
|
|
+ // } catch (error) {
|
|
|
+ // console.error("Image upload failed", error);
|
|
|
+ // }
|
|
|
}
|
|
|
};
|
|
|
},
|
|
@@ -91,7 +93,7 @@ export default {
|
|
|
|
|
|
try {
|
|
|
const response = await this.uploadVideo(formData);
|
|
|
- const url = response.data.url; // 根据你的实际响应数据结构
|
|
|
+ const url = response.data.url;
|
|
|
const quill = this.$refs.quillEditor.quill;
|
|
|
const range = quill.getSelection();
|
|
|
quill.insertEmbed(range.index, "video", url);
|
|
@@ -101,9 +103,39 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
+ fileHandler() {
|
|
|
+ const input = document.createElement("input");
|
|
|
+ input.setAttribute("type", "file");
|
|
|
+ input.setAttribute("accept", ".doc,.docx,.pdf");
|
|
|
+ input.click();
|
|
|
+
|
|
|
+ input.onchange = async () => {
|
|
|
+ const file = input.files[0];
|
|
|
+ if (file) {
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("file", file);
|
|
|
+ const quill = this.$refs.quillEditor.quill;
|
|
|
+ const range = quill.getSelection();
|
|
|
+ quill.insertText(
|
|
|
+ range.index,
|
|
|
+ `File uploaded: ${file.name} (URL: ${formData})`
|
|
|
+ );
|
|
|
+ // try {
|
|
|
+ // const response = await this.uploadFile(formData);
|
|
|
+ // const url = response.data.url;
|
|
|
+ // const quill = this.$refs.quillEditor.quill;
|
|
|
+ // const range = quill.getSelection();
|
|
|
+ // quill.insertText(
|
|
|
+ // range.index,
|
|
|
+ // `File uploaded: ${file.name} (URL: ${url})`
|
|
|
+ // );
|
|
|
+ // } catch (error) {
|
|
|
+ // console.error("File upload failed", error);
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
async uploadImage(formData) {
|
|
|
- // 在这里实现你的图片上传逻辑
|
|
|
- // 示例:使用 axios 进行上传
|
|
|
const response = await axios.post("/api/upload/image", formData, {
|
|
|
headers: {
|
|
|
"Content-Type": "multipart/form-data",
|
|
@@ -112,8 +144,6 @@ export default {
|
|
|
return response;
|
|
|
},
|
|
|
async uploadVideo(formData) {
|
|
|
- // 在这里实现你的视频上传逻辑
|
|
|
- // 示例:使用 axios 进行上传
|
|
|
const response = await axios.post("/api/upload/video", formData, {
|
|
|
headers: {
|
|
|
"Content-Type": "multipart/form-data",
|
|
@@ -121,10 +151,25 @@ export default {
|
|
|
});
|
|
|
return response;
|
|
|
},
|
|
|
+ async uploadFile(formData) {
|
|
|
+ const response = await axios.post("/api/upload/file", formData, {
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "multipart/form-data",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ return response;
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
/* 添加你需要的样式 */
|
|
|
+::v-deep .ql-snow.ql-toolbar .ql-custom-file {
|
|
|
+ background: url("../assets/upload.png");
|
|
|
+ background-size: 16px 16px;
|
|
|
+ background-position: center center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ /*background: red;*/
|
|
|
+}
|
|
|
</style>
|