這里記錄用 vue-quill-editor 出現(xiàn)的幾個(gè)問(wèn)題:
1.圖片上傳服務(wù)器
使用 quill-image-extend-module 擴(kuò)展組件(上一篇介紹了)
2.圖片太大或太小
可以針對(duì)返回字符串的class進(jìn)行調(diào)整
3.quill視頻問(wèn)題
quill的視頻在保存的時(shí)候會(huì)轉(zhuǎn)成 iframe阱持,視頻展示出來(lái)的效果不太可控,而且ie瀏覽器的支持不友好述暂,
所以需要改成 video 原生標(biāo)簽躏精;做這件事的方法有兩種暖眼,第一種是去替換源碼,找到源碼寫(xiě)iframe的位置進(jìn)行重寫(xiě),網(wǎng)上資料有人這么干了瘾杭,但是我看了一下源碼,不太建議哪亿;
第二種:用 replace 去替換返回的要顯示的html內(nèi)容
<!--動(dòng)態(tài)頁(yè)面-->
<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>
以上是預(yù)覽富文本的內(nèi)容粥烁,content 是從后端返回的html內(nèi)容,只要在前端將iframe標(biāo)簽用 video標(biāo)簽替換一下即可锣夹;
image.png
ezgif.com-gif-maker.gif