小程序富文本解析

Charlie_Jade 發(fā)布于2019-08-23 12:35 / 2416人閱讀

摘要：目前項(xiàng)目中的富文本來(lái)自于后臺(tái)的編輯器，導(dǎo)致富文本比較粗糙，什么內(nèi)容都有。我們目前的方案是先讓富文本通過(guò)過(guò)濾工具進(jìn)行過(guò)濾。

目前項(xiàng)目中的富文本來(lái)自于后臺(tái)的編輯器，導(dǎo)致富文本比較粗糙，什么內(nèi)容都有。直接使用wxparse進(jìn)行解析會(huì)失敗。我們目前的方案是先讓富文本通過(guò)js-xss過(guò)濾工具進(jìn)行過(guò)濾。然后在進(jìn)行解析。

Js-xss使用方法：

下載整個(gè)js-xss項(xiàng)目

安裝browserify
npm install -g browserify

在js-xss目錄下，使用browserify重新打包
browserify? lib/index.js?>?dist/xss.js ?-s ?xss

如果提示不能找到cssfilter文件，則需要通過(guò)下面命令獲取這個(gè)文件

$ npm install cssfilter --save

先引入文件

const xss = require("../../../lib/js-xss/dist/xss.js");

//富文本解析

let that = this;
let article = _data.content;

let options = { // 自定義規(guī)則
  whiteList: {  // 白名單為空，表示過(guò)濾所有標(biāo)簽
    html: [],
    body: [],
    div: ["style"],
    p: ["style"],
    img: ["src"],
    strong: ["style"]
  },        
  stripIgnoreTag: true,      // 過(guò)濾所有非白名單標(biāo)簽的HTML
  allowCommentTag: false, //去掉HTML備注
  stripIgnoreTagBody: ["script", "style"] // script標(biāo)簽較特殊，需要過(guò)濾標(biāo)簽中間的內(nèi)容
};
let myxss = new xss.FilterXSS(options);
// 以后直接調(diào)用 myxss.process() 來(lái)處理即可
article = myxss.process(article);

這時(shí)得到的article就是過(guò)濾之后的富文本內(nèi)容了。
https://segmentfault.com/a/11...

云服務(wù)器 GPU云服務(wù)器富文本百度富文本讀取富文本 php富文本設(shè)計(jì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98797.html

相關(guān)文章

微信小程序富文本解析wxParse Alpha0.1-支持HTML及markdown解析

摘要：本項(xiàng)目由微信小程序開(kāi)發(fā)論壇會(huì)員開(kāi)發(fā)原文地址垂直微信小程序開(kāi)發(fā)交流社區(qū)加載慢，等等微信小程序富文本解析自定義組件，支持及解析可能是第一個(gè)微信小程序富文本解析組件代碼庫(kù)地址示例版使用地址現(xiàn)狀版本號(hào)目前還不太適合直接使用目前項(xiàng)目不本項(xiàng)目由微信小程序開(kāi)發(fā)論壇-WeAppDev http://weappdev.com/ 會(huì)員開(kāi)發(fā) 原文地址: http://weappdev.com/t/wxp...

daydream 2019-08-01 15:51 評(píng)論0 收藏0
富文本解析-微信小程序 rich-text 組件

摘要：微信小程序富文本解析器微信小程序在組件后開(kāi)始支持富文本解析，但需要對(duì)照一套自定義規(guī)則的數(shù)據(jù)格式，返回的富文本需要前端做數(shù)據(jù)轉(zhuǎn)換。微信小程序富文本解析器微信小程序在rich-text組件后開(kāi)始支持富文本解析，但需要對(duì)照一套自定義規(guī)則的 JOSN 數(shù)據(jù)格式，API 返回的富文本需要前端做數(shù)據(jù)轉(zhuǎn)換。這個(gè)主要是用于某些需要 API 直接輸出富文本的地方。比如后端輸出title字段, 但 ...

renweihub 2019-08-23 11:31 評(píng)論0 收藏0
wxParse version0.2-更好的微信小程序富文本HTML及Markdown解析

摘要：信息版本號(hào)歷史版本號(hào)具體代碼請(qǐng)查看倉(cāng)庫(kù)分支地址解決問(wèn)題微信小程序富文本解析組件詳述因?yàn)槲⑿判〕绦驔](méi)有提供等解析，原展示類文本沒(méi)有辦法圖文并茂的原生展示，主要目的就是彌補(bǔ)富文本解析空缺的組件，歡迎使用反饋開(kāi)發(fā)信息微信小程序開(kāi)發(fā)論壇垂直微信小程 wxParse信息版本號(hào)0.1 歷史版本號(hào)0.2 具體代碼請(qǐng)查看倉(cāng)庫(kù)分支V1 github地址: https://github.com/ici...

cucumber 2019-08-29 11:32 評(píng)論0 收藏0
wxParse version0.2-更好的微信小程序富文本HTML及Markdown解析

摘要：信息版本號(hào)歷史版本號(hào)具體代碼請(qǐng)查看倉(cāng)庫(kù)分支地址解決問(wèn)題微信小程序富文本解析組件詳述因?yàn)槲⑿判〕绦驔](méi)有提供等解析，原展示類文本沒(méi)有辦法圖文并茂的原生展示，主要目的就是彌補(bǔ)富文本解析空缺的組件，歡迎使用反饋開(kāi)發(fā)信息微信小程序開(kāi)發(fā)論壇垂直微信小程 wxParse信息版本號(hào)0.1 歷史版本號(hào)0.2 具體代碼請(qǐng)查看倉(cāng)庫(kù)分支V1 github地址: https://github.com/ici...

zhonghanwen 2019-08-01 15:58 評(píng)論0 收藏0
小程序rich-text對(duì)富文本支持方案

摘要：小程序富文本解析目前小程序使用比較多的富文本方案一個(gè)是小程序自帶的組件，一個(gè)是。使用方法文殊林舍山房由麗江鉑爾曼度假酒店余明金老師設(shè)計(jì)，是麗江古城的網(wǎng)紅民宿，年被評(píng)為全國(guó)家最美民宿，以及年最值得睡的張床。小程序富文本解析目前小程序使用比較多的富文本方案一個(gè)是小程序自帶的rich-text組件，一個(gè)是wxPrase。 wxPrase原理是把原有的html標(biāo)簽全部解析成小程序的組件，這...

William_Sang 2019-08-29 17:21 評(píng)論0 收藏0