当前位置：首页 > wzjs >正文

营销网站制作教程佛山优化网站关键词

wzjs 2025/8/27 21:55:51

营销网站制作教程,佛山优化网站关键词,菏泽培训网站建设,创研科技网站vue3工程中使用vditor完成markdown渲染并防止xss攻击背景环境解决方案引入依赖组件封装实现效果背景做oj系统时，题目使用的时markdown语法字符串,前端查看时需要将markdown转html再渲染到页面上。环境 vitevue3pnpm 解决方案引入依赖 pnpm install vdit…

vue3工程中使用vditor完成markdown渲染并防止xss攻击

背景
环境
解决方案
- 引入依赖
组件封装
实现效果

背景

做oj系统时，题目使用的时markdown语法字符串,前端查看时需要将markdown转html再渲染到页面上。

环境

vite
vue3
pnpm

解决方案

引入依赖

pnpm install vditor dompurify

vditor用于完成markdown转html
dompurify用于去除恶意代码

组件封装

<script setup lang="ts">
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import { onMounted, ref, watch } from 'vue'
import DOMPurify from 'dompurify'const contentEditor = ref()
const previewContent = ref('')// 注册事件
const emit = defineEmits(['update:modelValue'])// 父组件传来的值
const props = defineProps({modelValue: {type: String,default: '',},
})onMounted(() => {contentEditor.value = new Vditor('mdEdit', {height: 360,width: '100%',toolbarConfig: {pin: true,},value: props.modelValue,mode: 'sv', // 使用分屏预览模式toolbar: ['emoji','headings','bold','italic','strike','|','line','quote','list','ordered-list','check','outdent','indent','code','inline-code','insert-after','insert-before','undo','redo','link','table','fullscreen','outline',],cache: {enable: false,},// 失去焦点时触发blur(value: string) {// 触发事件，给父组件传值emit('update:modelValue', value)},after() {getSafeHtml()},})
})// 定义用于获取安全html的函数
function getSafeHtml() {previewContent.value = DOMPurify.sanitize(contentEditor.value.getHTML())
}// 监视modelValue实现双向数据绑定
watch(() => props.modelValue,(newValue) => {contentEditor.value.setValue(newValue)getSafeHtml()},
)
</script><template><div><div id="mdEdit" v-show="false" /><div v-html="previewContent" class="preview"></div></div>
</template><style scoped>
.preview {margin-top: 20px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;background-color: #f9f9f9;
}
</style>