使用富文本渲染框架 parser

component/parser.min/libs/CssHandler.js

+function t(t){var s=Object.assign(Object.create(null),i.userAgentStyles);for(var h in t)s[h]=(s[h]?s[h]+";":"")+t[h];this.styles=s}function s(t,s){this.data=t,this.floor=0,this.i=0,this.list=[],this.res=s,this.state=this.Space}var i=require("./config.js"),h=function(t){return t>="a"&&t<="z"||t>="A"&&t<="Z"};t.prototype.getStyle=function(t){this.styles=new s(t,this.styles).parse()},t.prototype.match=function(t,s){var i,h=(i=this.styles[t])?i+";":"";if(s.class)for(var e,a=s.class.split(" "),o=0;e=a[o];o++)(i=this.styles["."+e])&&(h+=i+";");return(i=this.styles["#"+s.id])&&(h+=i+";"),h},module.exports=t,s.prototype.parse=function(){for(var t;t=this.data[this.i];this.i++)this.state(t);return this.res},s.prototype.section=function(){return this.data.substring(this.start,this.i)},s.prototype.Space=function(t){"."==t||"#"==t||h(t)?(this.start=this.i,this.state=this.Name):"/"==t&&"*"==this.data[this.i+1]?this.Comment():i.blankChar[t]||";"==t||(this.state=this.Ignore)},s.prototype.Comment=function(){this.i=this.data.indexOf("*/",this.i)+1,this.i||(this.i=this.data.length),this.state=this.Space},s.prototype.Ignore=function(t){"{"==t?this.floor++:"}"!=t||--this.floor||(this.state=this.Space)},s.prototype.Name=function(t){i.blankChar[t]?(this.list.push(this.section()),this.state=this.NameSpace):"{"==t?(this.list.push(this.section()),this.Content()):","==t?(this.list.push(this.section()),this.Comma()):!h(t)&&(t<"0"||t>"9")&&"-"!=t&&"_"!=t&&(this.state=this.Ignore)},s.prototype.NameSpace=function(t){"{"==t?this.Content():","==t?this.Comma():i.blankChar[t]||(this.state=this.Ignore)},s.prototype.Comma=function(){for(;i.blankChar[this.data[++this.i]];);"{"==this.data[this.i]?this.Content():(this.start=this.i--,this.state=this.Name)},s.prototype.Content=function(){this.start=++this.i,-1==(this.i=this.data.indexOf("}",this.i))&&(this.i=this.data.length);for(var t,s=this.section(),i=0;t=this.list[i++];)this.res[t]?this.res[t]+=";"+s:this.res[t]=s;this.list=[],this.state=this.Space}
\ No newline at end of file

component/parser.min/libs/config.js

+function e(e){for(var t=Object.create(null),a=e.split(","),o=a.length;o--;)t[a[o]]=!0;return t}var t=wx.canIUse("editor");
+module.exports={
+  errorImg:null,
+  filter:null,
+  highlight:null,
+  onText:null,
+  entities:{quot:'"',apos:"'",semi:";",nbsp:" ",ndash:"–",mdash:"—",middot:"·",lsquo:"‘",rsquo:"’",ldquo:"“",rdquo:"”",bull:"•",hellip:"…"},
+  blankChar:e(' ,\xA0,\t,\r,\n,\f'),
+  boolAttrs:e('autoplay,autostart,controls,ignore,loop,muted'),
+  blockTags:e('address,article,aside,body,caption,center,cite,footer,header,html,nav,section'+(t?'':',pre')),
+  ignoreTags:e('area,base,canvas,frame,iframe,input,link,map,meta,param,script,source,style,svg,textarea,title,track,wbr'+(t?',rp':'')),
+  richOnlyTags:e('a,colgroup,fieldset,legend,table'+(t?',bdi,bdo,rt,ruby':'')),
+  selfClosingTags:e('area,base,br,col,circle,ellipse,embed,frame,hr,img,input,line,link,meta,param,path,polygon,rect,source,track,use,wbr'),
+  trustTags:e('a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video'+(t?',bdi,bdo,caption,pre,rt,ruby':'')),
+  userAgentStyles:{address:"font-style:italic",big:"display:inline;font-size:1.2em",blockquote:"background-color:#f6f6f6;border-left:3px solid #dbdbdb;color:#6c6c6c;padding:5px 0 5px 10px",caption:"display:table-caption;text-align:center",center:"text-align:center",cite:"font-style:italic",dd:"margin-left:40px",mark:"background-color:yellow",pre:"font-family:monospace;white-space:pre;overflow:scroll",s:"text-decoration:line-through",small:"display:inline;font-size:0.8em",u:"text-decoration:underline"}
+}
\ No newline at end of file

component/parser.min/parser.js

+// 小程序富文本插件 https://github.com/jin-yufeng/Parser
+var dom;var search;function t(t){for(var e=t.length,i=5381;e--;)i+=(i<<5)+t.charCodeAt(e);return i}var e={},i=require("./libs/MpHtmlParser.js"),n=wx.getFileSystemManager&&wx.getFileSystemManager();Component({options:{pureDataPattern:/^[acdgtu]|W/},data:{nodes:[]},properties:{html:{type:String,observer:function(t){this.setContent(t)}},autopause:{type:Boolean,value:!0},autoscroll:Boolean,autosetTitle:{type:Boolean,value:!0},compress:Number,domain:String,lazyLoad:Boolean,loadingImg:String,selectable:Boolean,tagStyle:Object,showWithAnimation:Boolean,useAnchor:Boolean,useCache:Boolean},relations:{"../parser-group/parser-group":{type:"ancestor"}},created:function(){var t=this;this.imgList=[],this.imgList.setItem=function(t,e){var i=this;if(t&&e){if(0==e.indexOf("http")&&this.includes(e)){for(var s,a="",o=0;(s=e[o])&&("/"!=s||"/"==e[o-1]||"/"==e[o+1]);o++)a+=Math.random()>.5?s.toUpperCase():s;return a+=e.substr(o),this[t]=a}if(this[t]=e,e.includes("data:image")){var r=e.match(/data:image\/(\S+?);(\S+?),(.+)/);if(!r)return;var l=wx.env.USER_DATA_PATH+"/"+Date.now()+"."+r[1];n&&n.writeFile({filePath:l,data:r[3],encoding:r[2],success:function(){return i[t]=l}})}}},this.imgList.each=function(t){for(var e=0,i=this.length;e<i;e++)this.setItem(e,t(this[e],e,this))},dom&&(this.document=new dom(this)),search&&(this.search=function(e){return search(t,e)})},detached:function(){this.imgList.each(function(t){t&&t.includes(wx.env.USER_DATA_PATH)&&n&&n.unlink({filePath:t})}),clearInterval(this._timer)},methods:{in:function(t){t.page&&t.selector&&t.scrollTop&&(this._in=t)},navigateTo:function(t){var e=this;if(!this.data.useAnchor)return t.fail&&t.fail("Anchor is disabled");var i=(this._in?this._in.page:this).createSelectorQuery().select((this._in?this._in.selector:".top")+(t.id?">>>#"+t.id:"")).boundingClientRect();this._in?i.select(this._in.selector).fields({rect:!0,scrollOffset:!0}):i.selectViewport().scrollOffset(),i.exec(function(i){if(!i[0])return e.group?e.group.navigateTo(e.i,t):t.fail&&t.fail("Label not found");var n=i[1].scrollTop+i[0].top-(i[1].top||0)+(t.offset||0);if(e._in){var s={};s[e._in.scrollTop]=n,e._in.page.setData(s)}else wx.pageScrollTo({scrollTop:n});t.success&&t.success()})},getText:function(){for(var t,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.data.nodes,i="",n=0;t=e[n++];)if("text"==t.type)i+=t.text.replace(/&nbsp;/g," ").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&amp;/g,"&");else if("br"==t.type)i+="\n";else{var s="p"==t.name||"div"==t.name||"tr"==t.name||"li"==t.name||"h"==t.name[0]&&t.name[1]>"0"&&t.name[1]<"7";s&&i&&"\n"!=i[i.length-1]&&(i+="\n"),t.children&&(i+=this.getText(t.children)),s&&"\n"!=i[i.length-1]?i+="\n":"td"!=t.name&&"th"!=t.name||(i+="\t")}return i},getVideoContext:function(t){if(!t)return this.videoContexts;for(var e=this.videoContexts.length;e--;)if(this.videoContexts[e].id==t)return this.videoContexts[e]},setContent:function(n,s){var a,o=this,r=new i(n,this.data);if(this.data.useCache){var l=t(n);e[l]?a=e[l]:e[l]=a=r.parse()}else a=r.parse();this.triggerEvent("parse",a);var h={};if(s)for(var c=this.data.nodes.length,d=a.length;d--;)h["nodes["+(c+d)+"]"]=a[d];else h.nodes=a;this.showWithAnimation&&(h.showAm="animation: show .5s"),this.setData(h,function(){o.triggerEvent("load")}),a.title&&this.data.autosetTitle&&wx.setNavigationBarTitle({title:a.title}),this.imgList.length=0,this.videoContexts=[];for(var u,g=this.selectAllComponents(".top,.top>>>._node"),f=0;u=g[f++];){u.top=this;for(var m,p=0;m=u.data.nodes[p++];)if(!m.c)if("img"==m.name)this.imgList.setItem(m.attrs.i,m.attrs.src);else if("video"==m.name||"audio"==m.name){var v;v="video"==m.name?wx.createVideoContext(m.attrs.id,u):u.selectComponent("#"+m.attrs.id),v&&(v.id=m.attrs.id,this.videoContexts.push(v))}}var x;clearInterval(this._timer),this._timer=setInterval(function(){o.createSelectorQuery().select(".top").boundingClientRect(function(t){t&&(o.rect=t,t.height==x&&(o.triggerEvent("ready",t),clearInterval(o._timer)),x=t.height)}).exec()},350)}}})
\ No newline at end of file

component/parser.min/parser.json

+{"component":true,"usingComponents":{"trees":"./trees/trees"}}
\ No newline at end of file

component/parser.min/parser.wxml

+<slot wx:if="{{!nodes.length}}"/><trees class="top"style="{{selectable?'user-select:text;-webkit-user-select:text;':''}}{{showAm}}"lazy-load="{{lazyLoad}}"loading="{{loadingImg}}"nodes="{{nodes}}"/>
\ No newline at end of file

component/parser.min/parser.wxss

+:host{display:block;overflow:scroll;webkit-overflow-scrolling:touch}.top{display:inherit}@keyframes show{0%{opacity:0}100%{opacity:1}}
\ No newline at end of file

component/parser.min/trees/trees.js

+function _defineProperty(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var t=require("../libs/config.js").errorImg;Component({data:{canIUse:!!wx.chooseMessageFile,placeholder:"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='225'/>",ctrl:[]},properties:{nodes:Array,lazyLoad:Boolean,loading:String},methods:{play:function(t){if(this.top.group&&this.top.group.pause(this.top.i),this.top.videoContexts.length>1&&this.top.data.autopause)for(var e=this.top.videoContexts.length;e--;)this.top.videoContexts[e].id!=t.currentTarget.id&&this.top.videoContexts[e].pause()},imgtap:function(t){var e=t.currentTarget.dataset.attrs;if(!e.ignore){var r=!0;if(this.top.triggerEvent("imgtap",{id:t.currentTarget.id,src:e.src,ignore:function(){return r=!1}}),r){if(this.top.group)return this.top.group.preview(this.top.i,e.i);var i=this.top.imgList,a=i[e.i]?i[e.i]:(i=[e.src],e.src);wx.previewImage({current:a,urls:i})}}},loadImg:function(t){var e=t.target.dataset.i;this.data.lazyLoad&&!this.data.ctrl[e]?this.setData(_defineProperty({},"ctrl["+e+"]",1)):this.data.loading&&2!=this.data.ctrl[e]&&this.setData(_defineProperty({},"ctrl["+e+"]",2))},linkpress:function(t){var e=!0,r=t.currentTarget.dataset.attrs;r.ignore=function(){return e=!1},this.top.triggerEvent("linkpress",r),e&&(r["app-id"]?wx.navigateToMiniProgram({appId:r["app-id"],path:r.path}):r.href&&("#"==r.href[0]?this.top.navigateTo({id:r.href.substring(1)}):0==r.href.indexOf("http")||0==r.href.indexOf("//")?wx.setClipboardData({data:r.href,success:function(){return wx.showToast({title:"链接已复制"})}}):wx.navigateTo({url:r.href,fail:function(){wx.switchTab({url:r.href})}})))},error:function(e){var r=e.target.dataset.source,i=e.target.dataset.i,a=this.data.nodes[i];if("video"==r||"audio"==r){var s=(a.i||0)+1;if(s<a.attrs.source.length)return this.setData(_defineProperty({},"nodes["+i+"].i",s))}else"img"==r&&t&&(this.top.imgList.setItem(e.target.dataset.index,t),this.setData(_defineProperty({},"nodes["+i+"].attrs.src",t)));this.top&&this.top.triggerEvent("error",{source:r,target:e.target,errMsg:e.detail.errMsg})},loadVideo:function(t){this.setData(_defineProperty({},"nodes["+t.target.dataset.i+"].attrs.autoplay",!0))}}})
\ No newline at end of file

component/parser.min/trees/trees.json

+{"component":true,"usingComponents":{"trees":"./trees"}}
\ No newline at end of file

component/parser.min/trees/trees.wxml

+<wxs module="handler">var s={abbr:1,b:1,big:1,code:1,del:1,em:1,i:1,ins:1,label:1,q:1,small:1,span:1,strong:1,sub:1,sup:1};module.exports={visited:function(s,e){s.instance.hasClass("_visited")||s.instance.addClass("_visited"),e.callMethod("linkpress",s)},use:function(e){return!e.c&&!s[e.name]&&-1==(e.attrs.style||"").indexOf("display:inline")}}</wxs><block wx:for="{{nodes}}" wx:for-item="n" wx:for-index="i" wx:key="i"><view wx:if="{{n.name=='img'}}" id="{{n.attrs.id}}" class="_img {{n.attrs.class}}" style="{{n.attrs.style}}" data-attrs="{{n.attrs}}" bindtap="imgtap"><rich-text nodes="{{[{attrs:{src:loading&&ctrl[i]!=2?loading:(lazyLoad&&!ctrl[i]?placeholder:n.attrs.src||''),alt:n.attrs.alt||'',width:n.attrs.width||'',style:'-webkit-touch-callout:none;max-width:100%;display:block'+(n.attrs.height?';height:'+n.attrs.height:'')},name:'img'}]}}"/><image class="_image" src="{{lazyLoad&&!ctrl[i]?placeholder:n.attrs.src}}" lazy-load="{{lazyLoad}}" show-menu-by-longpress="{{!n.attrs.ignore}}" data-i="{{i}}" data-index="{{n.attrs.i}}" data-source="img" bindload="loadImg" binderror="error"/></view><text wx:elif="{{n.type=='text'}}" decode>{{n.text}}</text><text wx:elif="{{n.name=='br'}}">\n</text><view wx:elif="{{n.name=='a'}}" id="{{n.attrs.id}}" class="_a {{n.attrs.class}}" hover-class="_hover" style="{{n.attrs.style}}" data-attrs="{{n.attrs}}" bindtap="{{canIUse?handler.visited:'linkpress'}}"><trees class="_node" nodes="{{n.children}}"/></view><block wx:elif="{{n.name=='video'}}"><view wx:if="{{n.lazyLoad&&!n.attrs.autoplay}}" id="{{n.attrs.id}}" class="_video {{n.attrs.class}}" style="{{n.attrs.style}}" data-i="{{i}}" bindtap="loadVideo"/><video wx:else id="{{n.attrs.id}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" autoplay="{{n.attrs.autoplay}}" controls="{{n.attrs.controls}}" loop="{{n.attrs.loop}}" muted="{{n.attrs.muted}}" poster="{{n.attrs.poster}}" src="{{n.attrs.source[n.i||0]}}" unit-id="{{n.attrs['unit-id']}}" data-i="{{i}}" data-source="video" binderror="error" bindplay="play"/></block><audio wx:elif="{{n.name=='audio'}}" id="{{n.attrs.id}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" author="{{n.attrs.author}}" autoplay="{{n.attrs.autoplay}}" controls="{{n.attrs.controls}}" loop="{{n.attrs.loop}}" name="{{n.attrs.name}}" poster="{{n.attrs.poster}}" src="{{n.attrs.source[n.i||0]}}" data-i="{{i}}" data-source="audio" binderror="error" bindplay="play"/><ad wx:elif="{{n.name=='ad'}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" unit-id="{{n.attrs['unit-id']}}" data-source="ad" binderror="error"/><view wx:elif="{{n.name=='li'}}" id="{{n.attrs.id}}" class="{{n.attrs.class}}" style="{{n.attrs.style}};display:flex"><view wx:if="{{n.type=='ol'}}" class="_ol-bef">{{n.num}}</view><view wx:else class="_ul-bef"><view wx:if="{{n.floor%3==0}}" class="_ul-p1">█</view><view wx:elif="{{n.floor%3==2}}" class="_ul-p2"/><view wx:else class="_ul-p1" style="border-radius:50%">█</view></view><trees class="_node _li" lazyLoad="{{lazyLoad}}" loading="{{loading}}" nodes="{{n.children}}"/></view><rich-text wx:elif="{{handler.use(n)}}" id="{{n.attrs.id}}" class="_p __{{n.name}}" nodes="{{[n]}}"/><trees wx:else id="{{n.attrs.id}}" class="_node _{{n.name}} {{n.attrs.class}}" style="{{n.attrs.style}}" lazyLoad="{{lazyLoad}}" loading="{{loading}}" nodes="{{n.children}}"/></block>
\ No newline at end of file

component/parser.min/trees/trees.wxss

+._a{display:inline;padding:1.5px 0 1.5px 0;color:#366092;word-break:break-all}._hover{text-decoration:underline;opacity:.7}._visited{color:#551a8b}._img{display:inline-block;max-width:100%;overflow:hidden}:host{display:inline}._blockquote,._div,._p,._ul,._ol,._li{display:block}._b,._strong{font-weight:bold}._code{font-family:monospace}._del{text-decoration:line-through}._em,._i{font-style:italic}._h1{font-size:2em}._h2{font-size:1.5em}._h3{font-size:1.17em}._h5{font-size:.83em}._h6{font-size:.67em}._h1,._h2,._h3,._h4,._h5,._h6{display:block;font-weight:bold}._image{display:block;width:100%;height:360px;margin-top:-360px;opacity:0}._ins{text-decoration:underline}._li{flex:1;width:0}._ol-bef{width:36px;margin-right:5px;text-align:right}._ul-bef{margin:0 12px 0 23px;line-height:normal}._ol-bef,._ul-bef{flex:none;user-select:none}._ul-p1{display:inline-block;width:.3em;height:.3em;overflow:hidden;line-height:.3em}._ul-p2{display:inline-block;width:.23em;height:.23em;border:.05em solid black;border-radius:50%}._q::before{content:'"'}._q::after{content:'"'}._sub{font-size:smaller;vertical-align:sub}._sup{font-size:smaller;vertical-align:super}.__bdi,.__bdo,.__ruby,.__rt{display:inline-block}._video{position:relative;display:inline-block;width:300px;height:225px;background-color:black}._video::after{position:absolute;top:50%;left:50%;margin:-15px 0 0 -15px;content:'';border-color:transparent transparent transparent white;border-style:solid;border-width:15px 0 15px 30px}
\ No newline at end of file

pages/activity-detail/activity-detail.json

 {
-  "usingComponents": {}
+  "usingComponents": {
+    "parser":"../../component/parser.min/parser"
+  }
 }
\ No newline at end of file

pages/activity-detail/activity-detail.wxml

@@ -37,8 +37,8 @@
             </view>
         </view>
         <view class="detail-describe">
-            <rich-text nodes="{{info.describe}}"></rich-text>
             <!-- <text>{{info.describe}}</text> -->
+             <parser html="{{info.describe}}"/>
         </view>
     </view>
 

pages/notice-detail/notice-detail.json

 {
     "navigationBarTextStyle": "black",
-    "usingComponents": {}
+    "usingComponents": {
+        "parser":"../../component/parser.min/parser"
+    }
 }
\ No newline at end of file

pages/notice-detail/notice-detail.wxml

@@ -12,7 +12,7 @@
         <image src="{{notice.cover}}" mode="center"></image>
     </view>
     <view class="describe">
-        <rich-text nodes="{{notice.describe}}"></rich-text>
+        <parser html="{{notice.describe}}"/>
         <!-- <block wx:for="{{notice.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
             <view>
                 <text>{{item}}</text>

pages/notice/notice.json

 {
     "navigationBarTextStyle": "black",
-    "usingComponents": {}
+    "usingComponents": {
+        "parser":"../../component/parser.min/parser"
+    }
 }
\ No newline at end of file

pages/notice/notice.wxml

@@ -14,8 +14,8 @@
                     <text>{{item.date}}</text>
                 </view>
                 <view class="notice-describe">
-                    <rich-text nodes="{{item.describe}}"></rich-text>
                     <!-- <text>{{item.describe}}</text> -->
+                    <parser html="{{item.describe}}"/>
                 </view>
                 <view class="notice-cover" wx:if="{{item.cover !== ''}}">
                     <image src="{{item.cover}}" mode="center"></image>

pages/strategy/strategy.json

 {
-  "usingComponents": {}
+  "usingComponents": {
+    "parser":"../../component/parser.min/parser"
+  }
 }
\ No newline at end of file

pages/strategy/strategy.wxml

@@ -27,7 +27,7 @@
         <!-- <block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index">
             <image mode="widthFix" src="{{item}}"></image>
         </block> -->
-        <rich-text nodes="{{content}}"></rich-text>
+        <parser html="{{content}}"/>
 
         <view class="relation" wx:if="{{relation.length>0}}">
             <view class="relation-title">