一、问题
我想将视频、音频运用外链的形式iframe插入自己的博客文章中,节约服务器资源
插入后mavon-editor预览区不显示,没有解析出来
二、 解决
搞了三四天,在mavon-editor官方文档中找到了props
name 名称 | type 类型 |
---|---|
xssOptions | Object |
{},xss规则配置, 默认开启,设置false可以关闭,开启后会对HTML标签进行过滤,默认过滤所有HTML标签属性,建议按需配置白名单减少被攻击的可能。
- 自定义规则参考: https://jsxss.com/zh/options.html
- 参考DEMO: https://github.com/hinesboy/mavonEditor/blob/HEAD/src/dev/editor.vue
在mavon-editor中使用xssOptions
<mavon-editor
ref="md"
v-model="body"
subfield="false"
:editable="false"
default-open="preview"
:ishljs="true"
:toolbarsFlag="false"
:navigation="true"
:html="true"
:xssOptions="{
whiteList: {
iframe: ['src', 'height', 'width'],
div: ['style', 'height', 'width', 'align'],
},
}"
/>
页面
关于如何在mavon-editor中自定义组件,请查询官方文档,插入视频、音频,我参照了这位博主的https://blog.csdn.net/qq_39909290/article/details/117642129
他写的详细