关于mavon-editor中iframe 的使用 和插入视频、音频的记录

一、问题

我想将视频、音频运用外链的形式iframe插入自己的博客文章中，节约服务器资源
插入后mavon-editor预览区不显示，没有解析出来

二、 解决

搞了三四天，在mavon-editor官方文档中找到了props

{}，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
他写的详细

标签：mavon,iframe,自定义,音频,插入,editor,https
来源： https://blog.csdn.net/levi2469/article/details/122550131