|
@@ -16,7 +16,12 @@
|
|
|
</template>
|
|
|
|
|
|
<template v-else>
|
|
|
- <div class="rich-editor" v-html="content"></div>
|
|
|
+ <div
|
|
|
+ class="rich-editor"
|
|
|
+ ref="richEditor"
|
|
|
+ v-html="content"
|
|
|
+ @click="handleImageClick"
|
|
|
+ ></div>
|
|
|
</template>
|
|
|
<div v-if="loading" class="overlay">
|
|
|
<el-progress
|
|
@@ -29,7 +34,8 @@
|
|
|
|
|
|
<script>
|
|
|
// import CKEditor from "ckeditor4-vue";
|
|
|
-import { findData } from "@/api/sourceData";
|
|
|
+import { findData, uploadImage } from "@/api/sourceData";
|
|
|
+import axios from "axios"; // 确保导入 axios
|
|
|
import { data } from "jquery";
|
|
|
export default {
|
|
|
name: "app",
|
|
@@ -844,6 +850,118 @@ export default {
|
|
|
this.$emit("onUpdate", this.currentIndex, e);
|
|
|
},
|
|
|
|
|
|
+ /* 点击替换图片 */
|
|
|
+ handleImageClick(event) {
|
|
|
+ if (event.target.tagName === "IMG") {
|
|
|
+ this.replaceImage(event.target);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectImage() {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ const input = document.createElement("input");
|
|
|
+ input.type = "file";
|
|
|
+ input.accept = "image/*";
|
|
|
+ input.onchange = (e) => resolve(e.target.files[0]);
|
|
|
+ input.click();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ async uploadImage(formData) {
|
|
|
+ try {
|
|
|
+ const response = await axios.post(
|
|
|
+ "http://58.246.234.210:8084/upload/image",
|
|
|
+ formData,
|
|
|
+ {
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "multipart/form-data",
|
|
|
+ },
|
|
|
+ }
|
|
|
+ );
|
|
|
+ console.log("Upload response:", response);
|
|
|
+ if (response.status === 200 && response.data && response.data.url) {
|
|
|
+ return response.data.url;
|
|
|
+ } else {
|
|
|
+ throw new Error("Invalid upload response");
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("Error uploading image:", error);
|
|
|
+ throw error;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* updateContentWithNewImage(imgElement) {
|
|
|
+ // 更新 content 中的图片 URL
|
|
|
+ const tempDiv = document.createElement('div');
|
|
|
+ tempDiv.innerHTML = this.content;
|
|
|
+ const images = tempDiv.getElementsByTagName('img');
|
|
|
+ for (let img of images) {
|
|
|
+ if (img.src === imgElement.src) {
|
|
|
+ img.src = imgElement.src;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.content = tempDiv.innerHTML;
|
|
|
+ this.$emit('onUpdate', this.currentIndex, this.content);
|
|
|
+ }, */
|
|
|
+
|
|
|
+ async replaceImage(imgElement) {
|
|
|
+ try {
|
|
|
+ const file = await this.selectImage();
|
|
|
+ if (file) {
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("upload", file);
|
|
|
+ const uploadedUrl = await this.uploadImage(formData);
|
|
|
+
|
|
|
+ // Update the image element in the DOM
|
|
|
+ imgElement.src = uploadedUrl;
|
|
|
+
|
|
|
+ // Update the content and notify parent component
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.updateContentWithNewImage(uploadedUrl);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("Error replacing image:", error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ updateContentWithNewImage(newImageUrl) {
|
|
|
+ // Get the latest DOM content
|
|
|
+ const latestContent = this.$refs.richEditor.innerHTML;
|
|
|
+
|
|
|
+ // Update this.content with the latest DOM content
|
|
|
+ this.content = latestContent;
|
|
|
+
|
|
|
+ console.log("Updated content:", this.content);
|
|
|
+
|
|
|
+ // Update the com object
|
|
|
+ this.com.content = this.content;
|
|
|
+
|
|
|
+ // Emit an event to update the parent component
|
|
|
+ this.$emit("updateComContent", this.currentIndex, this.com);
|
|
|
+ },
|
|
|
+
|
|
|
+ /* updateComsData(newImageUrl) {
|
|
|
+ // 找到当前组件在 coms 数组中的索引
|
|
|
+ const comIndex = this.coms.findIndex((com) => com.name === this.com.name);
|
|
|
+ if (comIndex !== -1) {
|
|
|
+ // 创建 coms 的深拷贝
|
|
|
+ const updatedComs = JSON.parse(JSON.stringify(this.coms));
|
|
|
+
|
|
|
+ // 更新特定组件的 content
|
|
|
+ updatedComs[comIndex].content = this.content;
|
|
|
+
|
|
|
+ // 如果有特定的图片属性,也更新它
|
|
|
+ const imgAttr = updatedComs[comIndex].attrs.find(
|
|
|
+ (attr) => attr.type === "image"
|
|
|
+ );
|
|
|
+ if (imgAttr) {
|
|
|
+ imgAttr.content = newImageUrl;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新 coms
|
|
|
+ this.$emit("update:coms", updatedComs);
|
|
|
+ }
|
|
|
+ }, */
|
|
|
/* onFocus(e) {
|
|
|
// var range = e.editor.getSelection().getRanges()[0];
|
|
|
// range.collapse( true );
|