feat: 支持通过html_rander标签 支持script执行
This commit is contained in:
parent
b3a302585c
commit
e9d3d86330
36
ui/src/components/markdown/HtmlRander.vue
Normal file
36
ui/src/components/markdown/HtmlRander.vue
Normal 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>
|
||||||
@ -9,7 +9,8 @@
|
|||||||
<el-icon><EditPen /></el-icon>
|
<el-icon><EditPen /></el-icon>
|
||||||
{{ item.content }}
|
{{ item.content }}
|
||||||
</div>
|
</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
|
<MdPreview
|
||||||
v-else
|
v-else
|
||||||
noIconfont
|
noIconfont
|
||||||
@ -24,12 +25,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import { config } from 'md-editor-v3'
|
import { config } from 'md-editor-v3'
|
||||||
|
import HtmlRander from './HtmlRander.vue'
|
||||||
config({
|
config({
|
||||||
markdownItConfig(md) {
|
markdownItConfig(md) {
|
||||||
md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
|
md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
|
||||||
tokens[idx].attrSet('target', '_blank')
|
tokens[idx].attrSet('target', '_blank')
|
||||||
return md.renderer.renderToken(tokens, idx, options)
|
return md.renderer.renderToken(tokens, idx, options)
|
||||||
}
|
}
|
||||||
|
document.appendChild
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user