feat:完成富文本图片适配

This commit is contained in:
lixg
2023-03-05 21:04:59 +08:00
parent db5395dcc4
commit 30093f0fb8
5 changed files with 119 additions and 3 deletions

View File

@@ -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 -->