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

This commit is contained in:
shaohuzhang1 2024-09-12 19:49:40 +08:00 committed by shaohuzhang1
parent b3a302585c
commit e9d3d86330
2 changed files with 40 additions and 1 deletions

View File

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

View File

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