富文本显示相关问题总结

54 阅读 0 评论 36 点赞

我是靠谱客的博主洁净钢铁侠，最近开发中收集的这篇文章主要介绍富文本显示相关问题总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

pc端适用的方法：
预览富文本中的图片：

     <div v-html="content" @click="previewImg($event)"></div>
     <!-- 图片预览 -->
      <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
        <img style="width: 100%" :src="previewImage" />
      </a-modal>

//previewImg方法
 previewImg(e) {
    if (e.target.tagName == 'IMG') {
      this.previewImag e= e.target.src;//图片地址
      this.previewVisible = true;
     }
 },

移动端适用的方法：
1、在vue中使用v-html展示富文本问题总结
（1）给富文本里面的图片设置点击放大事件
使用自定义的vue指令 vue-images-loaded (图片加载完毕指令)

//1、安装
 npm i vue-images-loaded -s
//2、引入
import imageLoad from "vue-images-loaded";
//3、自定义指令
 directives: {
    imageLoad,
 },
 //4、在v-html绑定的标签上添加自定义指令
 <div v-html="content" class="content"  v-imageLoad="previewImg"></div>
 //5、图片预览函数，我用的是cube-ui的图片预览方法
  previewImg() {
		let _this=this
		//获取v-html中的所有img标签，返回一个类数组
		let img = document.getElementsByTagName("img");
		//将类数组转换为数组
		img =  Array.from(img)
		//遍历数组添加点击事件
		img.forEach((element,index) => {
		//把v-html中img的src属性添加至data中定义的imageUrl中
		_this.imageUrl.push(element.currentSrc)
		//添加点击事件
		element.onclick=function(){ 
			let imgList = []
			imgList.push(_this.imageUrl[index])
			_this.$createImagePreview({
				imgs: imgList,
			}).show()
		  }
		});
 },

(2)、设置富文本表格、图片的样式,可以使用标签选择器设置样式
例如：

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

2、微信小程序中使用rich-text标签展示富文本
(1)、设置图片的样式(原理就是利用正则表达式选中img标签添加图片样式)

imgAuto:function(txt){
    let content = txt.replace(/<img[^>]*>/gi, function(match, capture) {
        //这里注意要判断一下img标签中原本有没有style属性
			if(match.search(/style=/gi) == -1){
				match = match.replace(/<img/gi,'<img style=""');
			}
					return match;
	   });
      content = content.replace(/style="/gi, '$& max-width:100% !important; ');//图片自适应
      content = content.replace(/&nbsp;/g,'xa0');//她不识别&nbsp标签，要单独处理
      return content ;
}