超简单修改富文本字体样式

65 阅读 0 评论 43 点赞

我是靠谱客的博主难过蛋挞，最近开发中收集的这篇文章主要介绍超简单修改富文本字体样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近一直使用React 做项目，之前有个简单的需求：新闻详情页面，设置大、中、小三种字体，可以动态调整。
我一听很简单啊，动态设置新闻详情的容器div的样式就好了。
大概是这样的…

//三种字体类型来回切换
changeFontSize(type){
    switch (type) {
        case 0:
            return 1;
        case 1:
            return -1;
        case -1:
            return 0;
    }
}
//动态 改变 type 0 默认 1 大 -1 小 改变新闻内容大小
getFontSize(type){
    switch (type) {
        case 0:
            return {fontSize:'0.48rem',lineHeight:'0.72rem'};
        case 1:
            return {fontSize:'0.58rem',lineHeight:'0.82rem'};
        case -1:
            return {fontSize:'0.36rem',lineHeight:'0.60rem'};
    }
}

//render 内容
<div className="news-content-main"
     id={'news-content-main-html'}
     style={this.getFontSize(this.state.contentSizeType)}
     dangerouslySetInnerHTML={{ __html: this.state.data.content }}/>
     
   
//最后只需要在用户点击的地方调用  contentSizeType 默认0
this.setState({contentSizeType:this.changeFontSize(this.state.contentSizeType)});

看就是这么简单嘛，然后我就提交测试了。
测试测试之后，也没有发现问题，皆大欢喜，好的，上线啦！！
第二天，用户反馈，他们点击字体设置放大缩小，字体并没有放大缩小，只是看到了，行间距的变化。
我心想，不可能啊，我就去验证。
结果发现，用户发布的新闻内容类似这样的…

<p style="font-size:16px;color:#333333;text-align:justify;font-family:arial;background-color:#FFFFFF;">
    <span>最近有爆料显示，苹果正在打造一款超低价位的iPhone，预期价位在200-300美元之间，这和人民币大约是1400元左右。</span> 
</p>
<p style="font-size:16px;color:#333333;text-align:justify;font-family:arial;background-color:#FFFFFF;">
    <span>不过这也仅仅是目前的爆料，真实性无法得到保证，不过如果真的有这一研发计划，苹果可能会用上A13处理器。</span> 
</p>

而如果放入我们的代码中，应该是这样的…

<div style={{fontSize:'0.48rem',lineHeight:'0.72rem'}}>
<p style="font-size:16px;color:#333333;text-align:justify;font-family:arial;background-color:#FFFFFF;">
    <span>最近有爆料显示，苹果正在打造一款超低价位的iPhone，预期价位在200-300美元之间，这和人民币大约是1400元左右。</span> 
</p>
<p style="font-size:16px;color:#333333;text-align:justify;font-family:arial;background-color:#FFFFFF;">
    <span>不过这也仅仅是目前的爆料，真实性无法得到保证，不过如果真的有这一研发计划，苹果可能会用上A13处理器。</span> 
</p>
</div>

只要是一个有点前端知识的人都能够看出来，问题出现在了哪里？
没错，用户编辑的内容，p标签自带字体样式，优先级，比我设置的要高，但是并没有行间距设置，所以我们只能看到行间距的变化，却看不到字体大小的变化。
那么这个该怎么办呢？
我们有两个需求：
1、改变字体大小。
2、如果每个段落的字体大小不一致，那么最好能够成比例的放大缩小，而不是设置统一的字体大小。
整理下思路，我们如果实现上面的目标，那么需要能够获取到所有的富文本标签，并且对有字体大小样式的标签，重新设置字体大小。
于是我想到了 element. children ，直接上代码

let arr = [];//用来存放获取到的所有的标签
let arrFontSize = [];//用来存放获取到的所有的标签原来字体大小

//获取富文本所有子标签
getAllTags(obj){
    for(let i=0;i<obj.length;i++){
        if(obj[i].children){//当前元素还存在子元素的时候,递归
            this.getAllTags(obj[i].children);
        }
        //如果有fontSize样式 就保存下来
        if(obj[i].style.fontSize) {
            arr.push(obj[i]); //遍历到的元素添加到arr这个数组中间
            arrFontSize.push(parseInt(obj[i].style.fontSize.substring(0, obj[i].style.fontSize.length - 2)));//保存原标签字体大小
        }
    }
}

//设置字体大小  如果你还有其他需求 同样可以设置
setFontSize(base){
  arr.map((item,index)=>{
        item.style.fontSize=arrFontSize[index]*base+'px';
        item.style.lineHeight=arrFontSize[index]*base*1.7+'px';//这里同时 等比例的设置行间距
  });
}


 //获取到富文本并且渲染之后，获取所有的标签
this.getAllTags(document.getElementById('news-content-main-html').children);