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

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

  •  2
     
  •   nimingyonghu · 2019-05-29 08:03:01 +08:00 · 3127 次点击
    这是一个创建于 1992 天前的主题,其中的信息可能已经有所发展或是发生改变。

    是这样子的,管理后台是有一个富文本编辑器的,但是编辑人员录入文章的时候,可能是直接从 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'
    );
    

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

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