这里记录用 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标签替换一下即可;