网站建设 外包维普网论文收录查询

背景

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

实现效果