vue-quill-editor 导入视频，回显后视频很小巧妙解决

平时vue-quill-editor使用的时候，在编辑中导入相应的视频之后，存储到数据库后。

在另一页面进行一个回显，会发现显示的视频模组很小。

就这么小小个，看起来很不爽。但是如何改变，让视频能充满整个容器呢？

1. 首先我们通过F12检查回显页面的显示代码

我们发现 vue-quill-editor 保存后是以iframe保存的，所以导致让视频的呈现效果不可控

我们先试验一波，把iframe改成video看看效果

 

哇~这不也就看起来舒服多了，你们改完之后应该是会充满整个外层标签的。我这个还看起来是因为外层容器设置的就这么大。

 解决办法：

1. 改源码（不建议）:找到源码写iframe的位置进行重写，网上资料有人这么干了，但是我看了一下源码，不太建议 。

2. 在显示的时候进行替换（建议）:

axios.post('/api/getArticleByAuid/' + this.$route.params.auid).then(res => {
      let resultData = res.data.data
      if (resultData.content) {
        resultData.content = resultData.content.replace('<iframe', `<video controls="" autoplay=""`).replace('</iframe>', '</video>')
      }
      this.articleInfo = resultData
      axios.post('/api/checkCollectionAndSupport', this.articleInfo).then(res => {
        this.collectionAndSupportsStatus = res.data.code
      })
})

由于这些数据同时通过请求后端接口的方式获取的，所以在返回复制的时候对于主题content中的元素进行一个replace，那么就最终能实现该效果了。