前端对富文本如何处理

一：首先根据vue中的ref标记（例如：this.$refs.descriptionInfo.$el.children）获取到富文本元素中的所有标签

返回的结果是一个数组：[ 0: img ，1: h1 length: 2  ]
    
    注意：拿到的数组可能是一个伪数组，打印出长度为零：Collection有length属性，但是js调用时length为0的问题，这里获取到的是个伪数组,渲染之前打印的这个数组，看到的是渲染后的数据，通俗的讲 就是这个dom结构还没加载完，js就执行了，解决办法就等dom结构加载完成后再去获取这个数组。

   vue中使用this.$nextTick(()=>{})来获取即可

二：遍历该数组

取到每一个元素，根据该标签元素的localName属性来判断该标签的类别：img p h1 div 

三：以宽高为例，首先获取到元素的width 和 height ，然后通过if 条件判断，继而给该目标元素 定义需要的样式

注意：碰到图片的缩放问题，可以根据需要通过 img 的 宽度 和 实际需要的宽度 来计算缩放比，继而改变高度的同步缩放

主题思路：获取到目标元素，条件判断样式属性，根据需要来设置目标元素的样式。

 getrichWord(){
      this.$axios
        .get(this.$http + "api/personal/aboutus")
        .then(res => {
          //console.log(res);
          if (res.data.code == 0) {
            this.richHtml=res.data.Entity.content;
            this.exampleSolve(this.$refs.richHtml);
          }
        })
        .catch(err => {});
    },
     // 获取目标元素，返回数组
    exampleSolve(domele) {
      let refEle = domele;
      //console.log(domele);
      this.$nextTick(() => {
        let imgArr = refEle.getElementsByTagName("img");
        //console.log(imgArr);
        this.handleStyle(imgArr);
        let videoArr = refEle.getElementsByTagName("video");
        this.handleStyle(videoArr);
        //console.log(videoArr);
      });
    },
    // 处理富文本中的img 和 video标签元素
    handleStyle(ele) {
      let elem = ele;
      let maxWidth = $(".componayIntro").width();
      let ratio = 0;
      for (let i = 0; i < elem.length; i++) {
        //console.log($(elem[i]).width(), maxWidth);
        if ($(elem[i]).width() > maxWidth) {
          //console.log(elem[i]);
          ratio = $(elem[i]).width() / maxWidth;
          var height = $(elem[i]).height() / ratio;
          //console.log($(elem[i]).height(), ratio);
          $(elem[i]).css({
            width: maxWidth + "px",
            height: height + "px",
            margin: "0 auto",
            display: "block"
          });
          //console.log($(elem[i]).width());
        } else if ($(elem[i]).width() < maxWidth) {
          ratio = $(elem[i]).width() / maxWidth;
          var height = $(elem[i]).height() / ratio;
          $(elem[i]).css({
            width: maxWidth + "px",
            height: height + "px",
            margin: "0 auto",
            display: "block"
          });
        }
      }
    },