v-html直接处理出现问题:
1: 空格不展示
2:富文本换行 是通过<p></p>, 在v-html中,不展示换行,需要替换成
3:图片需要设置自适应,目前图片会超出父元素宽度。
是用函数替换后在是用v-html识别
function escape2Html (str) {
if (str) {
const arrEntities = { lt: '<', gt: '>', nbsp: ' ', amp: '&', quot: '"' }
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t] })
}
}
function htmlP2Br (str) {
if (str) {
return str.replace(/<p><\/p>/ig, '<br>')
}
}
<div class="news-content" v-html="Tools.htmlP2Br(Tools.escape2Html(info.content))"></div>