From e9d3d863307f94903681396b797efaa548dcdc41 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Thu, 12 Sep 2024 19:49:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87htm?=
 =?UTF-8?q?l=5Frander=E6=A0=87=E7=AD=BE=20=E6=94=AF=E6=8C=81script?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/markdown/HtmlRander.vue | 36 +++++++++++++++++++++++
 ui/src/components/markdown/MdRenderer.vue |  5 +++-
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/components/markdown/HtmlRander.vue

diff --git a/ui/src/components/markdown/HtmlRander.vue b/ui/src/components/markdown/HtmlRander.vue
new file mode 100644
index 000000000..a8be05959
--- /dev/null
+++ b/ui/src/components/markdown/HtmlRander.vue
@@ -0,0 +1,36 @@
+<template>
+  <div ref="htmlRef" :innerHTML="source"></div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+const htmlRef = ref<HTMLElement>()
+const props = withDefaults(
+  defineProps<{
+    source?: string
+    script_exec?: boolean
+  }>(),
+  {
+    source: '',
+    script_exec: true
+  }
+)
+onMounted(() => {
+  if (htmlRef.value && props.script_exec) {
+    const range = document.createRange()
+    range.selectNode(htmlRef.value)
+    const scripts = htmlRef.value.getElementsByTagName('script')
+    if (scripts) {
+      var documentFragment = range.createContextualFragment(
+        [...scripts]
+          .map((item: HTMLElement) => {
+            htmlRef.value?.removeChild(item)
+            return item.outerHTML
+          })
+          .join('\n')
+      )
+      htmlRef.value.appendChild(documentFragment)
+    }
+  }
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
index b62469483..3323d8730 100644
--- a/ui/src/components/markdown/MdRenderer.vue
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -9,7 +9,8 @@
       <el-icon><EditPen /></el-icon>
       {{ item.content }}
     </div>
-    <div v-else-if="item.type === 'html_rander'" :innerHTML="item.content"></div>
+    <HtmlRander v-else-if="item.type === 'html_rander'" :source="item.content"></HtmlRander>
+
     <MdPreview
       v-else
       noIconfont
@@ -24,12 +25,14 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { config } from 'md-editor-v3'
+import HtmlRander from './HtmlRander.vue'
 config({
   markdownItConfig(md) {
     md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
       tokens[idx].attrSet('target', '_blank')
       return md.renderer.renderToken(tokens, idx, options)
     }
+    document.appendChild
   }
 })
 const props = withDefaults(