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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2024 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

span

字体

content

font-size

7 条回复

jin5354

2019-05-29 08:28:05 +08:00

文本字段渲染前用正则把所有标签删了，最简单
要不就用 css 星号选择器泛选 + important 覆写

JayChouTerrace

2019-05-29 08:46:51 +08:00

Css 选择器，样式后面加 !important，提升权重（优先级）。
话说，之前我就用这个完成了页面字体替换额……

zhouyg

2019-05-29 09:53:54 +08:00

在编辑器里监听 paste 事件，把多余标签清理掉，只保留最原始的文本内容

nimingyonghu

2019-05-29 10:02:28 +08:00

@jin5354
@JayChouTerrace 嵌套的太深了,不太会写了...

PanJiaChen

2019-05-29 10:12:06 +08:00

大部分富文本都提供格式清理的，强用 css 覆盖是不合理的。应该从源头处理。

xi_lin

2019-05-29 12:46:56 +08:00

保存你如果没有权限动的话，你展示前先处理一遍过滤掉样式标签，无脑干掉所有 style 属性

love

2019-05-29 13:19:57 +08:00

.content * { font-size: 16px !important; }