feat:完成富文本图片适配

src/views/discuss/DiscussDetail.vue

@@ -314,7 +314,7 @@
 </template>
 
 <script setup>
-import { reactive, ref, computed } from "vue";
+import { reactive, ref, computed, watch } from "vue";
 import ReturnHead from "@/components/ReturnHead.vue";
 import px from "@/assets/image/discuss/px.jpg";
 import { request, useRequest } from "@/api/request";
@@ -624,6 +624,19 @@ function send() {
     submitComment();
   }
 }
+
+watch(disDetail, () => {
+  console.log(" disDetail.value.content", disDetail.value.content);
+  if (disDetail.value.content) {
+    let obj = disDetail.value.content;
+    let regex = new RegExp("<img", "gi");
+    let deleteStyle = /(?<=\" )style=\".*?\"/gi;
+    obj = obj.replace(deleteStyle, "");
+    obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
+    disDetail.value.content = obj;
+    console.log("disDetail.value.content", disDetail.value.content);
+  }
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/views/discuss/DiscussPage.vue

@@ -189,6 +189,17 @@ function getPostList(discussId) {
   })
     .then((e) => {
       console.log("我是当前讨论下的帖子", e);
+      if (e.data.records) {
+        let arr = e.data.records;
+        for (let i = 0; i < arr.length; i++) {
+          let obj = arr[i].content;
+          let regex = new RegExp("<img", "gi");
+          let deleteStyle = /(?<=\" )style=\".*?\"/gi;
+          obj = obj.replace(deleteStyle, "");
+          obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
+          arr[i].content = obj;
+        }
+      }
       state.postList = state.postList.concat(e.data.records);
       state.total = Number(e.data.total);
       if (e.data.records.length === 0 || e.data.records.length < 10) {
@@ -260,6 +271,19 @@ function handleCurrentChange(e, k) {
   state.pageNo = state.pageNo + 1;
   getPostList(state.info.discussDtoList[0].id);
 }
+
+watch(state.postList, () => {
+  console.log("state.postList", state.postList);
+  // if (data.value.offcourseDto && data.value.offcourseDto.outline) {
+  //   let obj = data.value.offcourseDto.outline;
+  //   let regex = new RegExp("<img", "gi");
+  //   let deleteStyle = /(?<=\" )style=\".*?\"/gi;
+  //   obj = obj.replace(deleteStyle, "");
+  //   obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
+  //   data.value.offcourseDto.outline = obj;
+  //   console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
+  // }
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/views/faceteach/FaceTeachNoCommon.vue

@@ -73,6 +73,7 @@
               <div class="work">
                 <div style="display: flex; align-items: center">
                   <div
+                    id="faceteachnocommon_img_id"
                     style="padding: 5px"
                     class="content"
                     v-html="data.offcourseDto?.outline"
@@ -147,7 +148,7 @@
 
 <script setup>
 import ReturnHead from "@/components/ReturnHead.vue";
-import { computed, reactive, toRefs, watch, onUnmounted } from "vue";
+import { computed, reactive, toRefs, watch, onUnmounted, onMounted } from "vue";
 import FileTypeImg from "@/components/FileTypeImg.vue";
 import { request, useRequest } from "@/api/request";
 import { STU_OFFCOURSE_DETAIL, FACETEACH_SIGNUP } from "@/api/api";
@@ -209,6 +210,19 @@ function formateArr(strs) {
   console.log("112233", arrs);
   return arrs;
 }
+
+watch(data, () => {
+  console.log("data.offcourseDto", data.value.offcourseDto);
+  if (data.value.offcourseDto && data.value.offcourseDto.outline) {
+    let obj = data.value.offcourseDto.outline;
+    let regex = new RegExp("<img", "gi");
+    let deleteStyle = /(?<=\" )style=\".*?\"/gi;
+    obj = obj.replace(deleteStyle, "");
+    obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
+    data.value.offcourseDto.outline = obj;
+    console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
+  }
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/views/faceteach/FaceTeachNoCourse.vue

@@ -213,6 +213,18 @@ function formateArr(strs) {
   console.log("112233", arrs);
   return arrs;
 }
+watch(data, () => {
+  console.log("data.offcourseDto", data.value.offcourseDto);
+  if (data.value.offcourseDto && data.value.offcourseDto.outline) {
+    let obj = data.value.offcourseDto.outline;
+    let regex = new RegExp("<img", "gi");
+    let deleteStyle = /(?<=\" )style=\".*?\"/gi;
+    obj = obj.replace(deleteStyle, "");
+    obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
+    data.value.offcourseDto.outline = obj;
+    console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
+  }
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/views/faceteach/FaceTeachSignUp.vue

@@ -88,6 +88,7 @@
               <div class="work">
                 <div style="display: flex; align-items: center">
                   <div
+                    id="face_img_id"
                     style="padding: 10px"
                     class="content"
                     v-html="data.offcourseDto?.outline"
@@ -165,7 +166,7 @@
 
 <script setup>
 import ReturnHead from "@/components/ReturnHead.vue";
-import { computed, reactive, toRefs, watch, onUnmounted } from "vue";
+import { computed, reactive, toRefs, watch, onUnmounted, onMounted } from "vue";
 import FileTypeImg from "@/components/FileTypeImg.vue";
 import { request, useRequest } from "@/api/request";
 import { STU_OFFCOURSE_DETAIL, FACETEACH_SIGNUP } from "@/api/api";
@@ -223,6 +224,58 @@ function formateArr(strs) {
   console.log("112233", arrs);
   return arrs;
 }
+watch(data, () => {
+  console.log("data.offcourseDto", data.value.offcourseDto);
+  if (data.value.offcourseDto && data.value.offcourseDto.outline) {
+    let obj = data.value.offcourseDto.outline;
+    let regex = new RegExp("<img", "gi");
+    let deleteStyle = /(?<=\" )style=\".*?\"/gi;
+    obj = obj.replace(deleteStyle, "");
+    obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
+    data.value.offcourseDto.outline = obj;
+    console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
+  }
+});
+// onMounted(() => {
+//   console.log("data.offcourseDto?.outline", data.value);
+//   // console.log("document", document.getElementById("face_img_id"));
+//   let imgs = document.getElementById("face_img_id").getElementsByTagName("img");
+//   console.log("imgs", imgs, imgs.length);
+//   let timer = setInterval(() => {
+//     if (imgs && imgs.length !== 0) {
+//       clearInterval(timer);
+//       for (let i = 0; i < imgs.length; i++) {
+//         console.log("11111", imgs[i], i);
+//         // console.log(
+//         //   "document.body.clientWidth",
+//         //   document.body.clientWidth,
+//         //   imgs[i].width
+//         // );
+//         // if (document.body.clientWidth <= imgs[i].width) {
+//         //   imgs[i].style.width = "100%";
+//         // }
+//         getImgInfo(imgs[i].src, i, imgs);
+//       }
+//     }
+//   }, 1000);
+// });
+function getImgInfo(url, i, imgs) {
+  console.log("url_i", url, i);
+  let image = new Image();
+  let w, h;
+  image.src = url;
+  console.log("dj", image.width);
+  image.onload = function () {
+    w = image.width;
+    console.log("image.width", image.width);
+    h = image.height;
+    console.log("document.body.clientWidth", document.body.clientWidth);
+    if (document.body.clientWidth <= w) {
+      imgs[i].style.width = "100%";
+    }
+    image.onload = null;
+  };
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->