是这样子的,管理后台是有一个富文本编辑器的,但是编辑人员录入文章的时候,可能是直接从 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 2019-05-29 08:28:05 +08:00
文本字段渲染前用正则把所有标签删了,最简单
要不就用 css 星号选择器泛选 + important 覆写 |
2
JayChouTerrace 2019-05-29 08:46:51 +08:00
Css 选择器,样式后面加 !important,提升权重(优先级)。
话说,之前我就用这个完成了页面字体替换额…… |
3
zhouyg 2019-05-29 09:53:54 +08:00
在编辑器里监听 paste 事件,把多余标签清理掉,只保留最原始的文本内容
|
4
nimingyonghu OP |
5
PanJiaChen 2019-05-29 10:12:06 +08:00
大部分富文本都提供格式清理的,强用 css 覆盖是不合理的。应该从源头处理。
|
6
xi_lin 2019-05-29 12:46:56 +08:00
保存你如果没有权限动的话,你展示前先处理一遍过滤掉样式标签,无脑干掉所有 style 属性
|
7
love 2019-05-29 13:19:57 +08:00
.content * { font-size: 16px !important; }
|