巧用Tencent官方模块进行文章排版

前端

学习TGideas的经验时偶然发现了腾讯官方用于文章排版的一个小工具，且应用十分简单，只需要增加一段代码即可。这个插件不仅可以对冗余样式、缩进的文章代码进行优化，并且还支持背景颜色的设置。

前言

学习TGideas的经验时偶然发现了腾讯官方用于文章排版优化的一个小工具，且应用十分简单，只需要增加一段代码即可。这个插件不仅可以对冗余样式、缩进的文章代码进行优化，并且还支持背景颜色的设置。可以说是非常实用。

模块功能设置

参数el

类型：String | HTMLElement，例如：.detail-content

详情：提供一个在页面上包裹详情内容信息的 DOM 元素或者类名。

参数options

类型：Object

详情：相关优化的方法的参数

具体参考如下：

options设置项类型详情
isClearBoolean是否清除空行
isDeleteBoolean是否冗余样式
styleArrArray需要去除的冗余样式，默认去除冗余的字体和字号 [‘font-family’,’font-size’]
colorBoolean是否对文章进行颜色处理，优化文章中设置的文字颜色与页面背景颜色之间的对比度达到符合WCAG2.0 AA要求。
processBoolean是否对文章进行进度条处理，展现文章的阅读进度，默认出现条形占比条
isProcessBarBoolen是否显示条形占比条，默认true
processDirString进度条所处位置，默认’right’,可选(‘left’‘right’‘top’‘bottom’)
isProcessContBoolean是否出现目录进度条，默认false
previewPicBoolean是否对文章图片进行可全屏缩放预览处理
imageSetBoolean是否对段落内只有一个图片进行居中和宽100%处理，并加上类detail-pic
isDeleteRetractBoolean是否对（段落文字）下的段落取消缩进

模块方法

  1. refresh()
    详情：正文内容更新后进行刷新，重新刷新进度条

  2. setDetailColor({bgElem:’改变背景色的dom元素或类名或ID’})

详情：对指定dom下的背景色对文章进行颜色替换已符合对比度标准，增强文章的可读性，bgElem默认为body

Demo

具体参照Tencent官方的范例，本文不再做过多介绍

  1. 原样与优化后对比：点击查看demo
  2. 浅色背景与深色背景对比：点击查看demo
  3. 点击切换白天黑夜模式：点击查看demo

JS代码

在所需文章格式化页<body>处插入一下JS代码即可完成排版功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 引入文章排版功能模块JS -->
<script src="//ossweb-img.qq.com/images/js/tgTypeFiles/js/tgDetail-v3.js" charset="utf-8"></script>
<script type="text/javascript">
// 功能参数设置
  (function(){
      var dd=new TGDetail('.detail-content', {
      isProcessCont:true,
      isClear:true,
      isDelete:true,
      styleArr:true,
      color:true,
      process:true,
      isProcessBar:true,
      processDir:true,
      isProcessCont:true,
      previewPic:true,
      imageSet:true,
      isDeleteRetract:true,
      });

  })();
</script>

转载自：TGideas

Buy me a coffee Buy me a coffee