這里記錄用 vue-quill-editor 出現的幾個問題:
1.圖片上傳服務器
使用 quill-image-extend-module 擴展組件(上一篇介紹了)
2.圖片太大或太小
可以針對返回字符串的class進行調整
3.quill視頻問題
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標簽替換一下即可;
image.png
ezgif.com-gif-maker.gif