feat: 支持通过html_rander标签 支持script执行

Author: shaohuzhang1

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>

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(