0
点赞
收藏
分享

微信扫一扫

vue-quill-editor 巧妙解决视频样式问题

MaxWen 2021-09-24 阅读 72
vue.jsVue

这里记录用 vue-quill-editor 出现的几个问题:

使用 quill-image-extend-module 扩展组件(上一篇介绍了)

可以针对返回字符串的class进行调整

quill的视频在保存的时候会转成 iframe,视频展示出来的效果不太可控,而且ie浏览器的支持不友好,
所以需要改成 video 原生标签;做这件事的方法有两种,第一种是去替换源码,找到源码写iframe的位置进行重写,网上资料有人这么干了,但是我看了一下源码,不太建议;
第二种:用 replace 去替换返回的要显示的html内容

<!--动态页面-->
<template>
  <div>
     <div class="art-con" v-html="change(content)"></div>
  </div>
</template>

<script>
export default {
  data() {
    content:''; //返回的富文本html
  },
  methods: {
    change(content) {
      let t = content.replace("<iframe", `<video style="width:1000px;margin-left:100px;outline:none;" controls="" autoplay=""`).replace("</iframe>", '</video>');
      return t
    }
  }
};
</script>

<style lang='scss' scoped>
.ql-align-center {
    text-align: center;
  }
</style>

以上是预览富文本的内容,content 是从后端返回的html内容,只要在前端将iframe标签用 video标签替换一下即可;

举报

相关推荐

0 条评论