目前项目中的富文本来自于后台的编辑器,导致富文本比较粗糙,什么内容都有。直接使用wxparse进行解析会失败。我们目前的方案是先让富文本通过js-xss过滤工具进行过滤。然后在进行解析。
Js-xss使用方法:
- 下载整个js-xss项目
- 安装browserify
npm install -g browserify - 在js-xss目录下,使用browserify重新打包
browserify lib/index.js > dist/xss.js -s xss - 如果提示不能找到cssfilter文件,则需要通过下面命令获取这个文件
$ npm install cssfilter --save
- 先引入文件
const xss = require('../../../lib/js-xss/dist/xss.js');
//富文本解析
let that = this;
let article = _data.content;
let options = { // 自定义规则
whiteList: { // 白名单为空,表示过滤所有标签
html: [],
body: [],
div: ['style'],
p: ['style'],
img: ['src'],
strong: ['style']
},
stripIgnoreTag: true, // 过滤所有非白名单标签的HTML
allowCommentTag: false, //去掉HTML备注
stripIgnoreTagBody: ['script', 'style'] // script标签较特殊,需要过滤标签中间的内容
};
let myxss = new xss.FilterXSS(options);
// 以后直接调用 myxss.process() 来处理即可
article = myxss.process(article);
这时得到的article就是过滤之后的富文本内容了。
https://segmentfault.com/a/11...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。