首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
V2EX  ›  问与答

被各种内嵌样式渲染的乱七八糟的富文本,如何在前端重新统一字体大小?

  •  2
     
  •   nimingyonghu · 113 天前 · 707 次点击
    这是一个创建于 113 天前的主题,其中的信息可能已经有所发展或是发生改变。

    是这样子的,管理后台是有一个富文本编辑器的,但是编辑人员录入文章的时候,可能是直接从 word 之类的地方粘贴的一段文字,粘贴完的文字似乎有很多行内样式,导致最终存储在数据库中的富文本字段为如下格式:

    <p><span style="font-family: 微软雅黑; font-size: 19px;"><span style="font-family: 微软雅黑;">又是一个没有蔡徐坤陪伴的日子,</span></span><span style="font-family: 微软雅黑; font-size: 16px;">你百无聊赖的瘫在柔软的沙发上,不知不觉电视中的广告等待时间已经过去</span></p>
    

    上面的富文本最终被渲染出来的字体就是一句话,前几个字体大,后几个字体小...

    请问这种有没有在前端再次对文字进行统一处理的办法呢?

    尝试用 jQuery 在前端写了一下,似乎在元素的 class 比较简单时有效,但是实际的情况是,出现问题的元素,class 定位比较麻烦.

    $('.content p, .content span, .content p').css(
      'font-family', '微软雅黑',  
      'font-size', '16px'
    );
    

    有没有老哥有类似经验的?

        1
    jin5354   113 天前
    文本字段渲染前用正则把所有标签删了,最简单
    要不就用 css 星号选择器泛选 + important 覆写
        2
    JayChouTerrace   113 天前
    Css 选择器,样式后面加 !important,提升权重(优先级)。
    话说,之前我就用这个完成了页面字体替换额……
        3
    zhouyg   113 天前
    在编辑器里监听 paste 事件,把多余标签清理掉,只保留最原始的文本内容
        4
    nimingyonghu   113 天前
    @jin5354
    @JayChouTerrace 嵌套的太深了,不太会写了...
        5
    PanJiaChen   113 天前
    大部分富文本都提供格式清理的,强用 css 覆盖是不合理的。应该从源头处理。
        6
    xi_lin   113 天前
    保存你如果没有权限动的话,你展示前先处理一遍过滤掉样式标签,无脑干掉所有 style 属性
        7
    love   113 天前
    .content * { font-size: 16px !important; }
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3940 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 20ms · UTC 09:10 · PVG 17:10 · LAX 02:10 · JFK 05:10
    ♥ Do have faith in what you're doing.