富文本内容展示字体样式处理

需求: 客户要求富文本编辑后的内容在页面展示时要统一字体大小和行高；

那当然尽可能满足人家需求咯！

话不多说，上代码

<span id="richtext-editor" v-html="remark"></span>

方案一： 

domHandle() { 
      this.$nextTick(() => { 
        let richTextElement = document.getElementById('richtext-editor');
        // 更改所有段落的字体大小
        // let allParagraphs = richTextElement.getElementsByTagName('p');  // 可以固定替换标签
        var allParagraphs = richTextElement.querySelectorAll('*'); 
        for (let p of allParagraphs) {
          p.style.fontSize = '14px'; // 更改字体大小
          p.style.lineHeight = '1.2'; // 行高
        }
      })
    },

方案二：

this.remark = this.fontStyleHandle(data.remark, 'small');

fontStyleHandle(element, type) {
    let size = {
      big: '18',
      middle: '16',
      small: '14'
    };
    var result = element.replaceAll(/font-size:(\s*\d+(?:\.\d+)?)pt\s*(;*)/gi, function () {
      return 'font-size:' + (size[type] || 14) + 'px;';       // 替换 pt 字体 font-size
    }).replaceAll(/font-size:(\s*\d+(?:\.\d+)?)px\s*(;*)/gi, function () {
      return 'font-size:' + (size[type] || 14) + 'px;';       // 替换 px 字体 font-size
    }).replaceAll(/line-height:(\s*\d+(?:\.\d+)?)px\s*(;*)/gi, function () {
      return 'line-height:1.2;';                              // 替换 pt 行高 line-height
    }).replaceAll(/line-height:(\s*\d+(?:\.\d+)?)pt\s*(;*)/gi, function () {
      return 'line-height:1.2;';                              // 替换 px 行高 line-height
    }).replaceAll(/line-height:(\s*\d+(?:\.\d+)?)\s*(;*)/gi, function () {
      return 'line-height:1.2;';                              // 不带单位的行高 line-height 
    }).replaceAll(/font-family:(\s*\d+(?:\.\d+)?)\s*(;*)/gi, function () {
      return 'Microsoft YaHei;';                              // 替换字体 font-family
    })
    return result;
  }

富文本输入内容如下

处理后页面显示效果：