uni-app中使用towxml

步骤见:  https://www.cnblogs.com/chuan2021/p/17223663.html

支持代码复制:

towxml先用mardown.js把mardown转换成html, 然后再解析html，最后渲染到towxml/decode.wxml页面中， 代码会渲染到

item.tag == "view" 一段中, 这里先在parse/index.js中增加一个参数， 好判断是不是代码块,  增加第18行, o.raw_tag = item.name, 修改结果:

 1   arr.forEach(item => {
 2                 if(item.type === 'comment'){
 3                     return;
 4                 };
 5                 let o = {
 6                         type:item.type === 'text' ? 'text' : isRichTextContent ? 'node' : item.type
 7                     },
 8                     e = {},
 9                     attrs = o.attrs = item.attribs || {};
10                 if(item.type === 'text'){
11                     o.text = e.text = item.data;
12                 }else{
13                     if(isRichTextContent){
14                         o.name = item.name;
15                     }else{
16                         o.tag = getWxmlTag(item.name);      // 转换之后的标签
17                         // o.tag = o.tag === 'text' ? 'view' : o.tag;
18                         o.raw_tag = item.name  // 增加这一行
19                         e.tag = item.name;                  // 原始
20                         o.attrs = item.attribs;
21                         e.attrs = JSON.parse(JSON.stringify(attrs));
22                     };
23                     attrs.class = attrs.class ? `h2w__${item.name} ${attrs.class}` : `h2w__${item.name}`;
24                     
25                     // 处理资源相对路径
26                     if(base && attrs.src){
27                         let src = attrs.src;
28                         switch (src.indexOf('//')) {
29                             case 0:
30                                 attrs.src = `https:${src}`;
31                             break;
32                             case -1:
33                                 attrs.src = `${base}${src}`;
34                             break;
35                         };
36                     };
37                 };
38 
39                 o.rely = relyList.indexOf(e.tag) > -1;      // 判断是否不能嵌套其它标签
40                 
41                 if(item.children){
42                     eachFn(item.children,o,e,isRichTextContent || item.name === 'rich-text');
43                 };
44                 child.push(o);
45                 child_e.push(e);
46             });

然后在decode.wxml的h2w__viewParent一段下进行判断和增加复制按钮:

towxml/decode.wxml

 1 <block wx:if="{{item.tag==='view'}}">
 2     <block wx:if="{{item.rely}}">
 3         <view data-data="{{item}}" class="{{item.attrs.class}}" data="{{item.attrs.data}}" id="{{item.attrs.id}}" style="{{item.attrs.style}}" catch:tap="_tap">
 4             <decode wx:if="{{item.children}}" nodes="{{item}}"/>
 5         </view>
 6     </block>
 7     <block wx:else>
 8         <view class="h2w__viewParent">
 9             <view data-data="{{item}}" class="{{item.attrs.class}}" data="{{item.attrs.data}}" id="{{item.attrs.id}}" style="{{item.attrs.style}}" catch:tap="_tap">
10                 <block wx:if="{{item.raw_tag === 'code'}}">
11                     <view style="float: right" catch:tap="_copy" data-data="{{item}}" data="{{item.attrs.data}}">复制</view>
12                 </block>
13                 <decode wx:if="{{item.children}}" nodes="{{item}}"/>
14             </view>
15         </view>
16     </block>
17 </block>

可以看到这里我们新增了一个copy函数， 专门支持复制代码块， 为了支持新event. 还需要改towxml/config.js中的events字段:

1     events:[
2         // 'touchstart',
3         // 'touchmove',
4         // 'touchcancel',
5         // 'touchend',
6         'tap',                      // 用于元素的点击事件
7         'change',                   // 用于todoList的change事件
8         'copy',                     // 代码复制事件
9     ],

然后就可以在uni-app中处理该点击事件:

 1 let result = this.$towxml(answer.msg,
 2     'markdown', {
 3     // base: 'https://xxx.com', // 相对资源的base路径
 4     theme: 'light', // 主题，默认`light`
 5     events: { // 为元素绑定的事件方法
 6         tap: (e) => {
 7             console.log('tap', e);
 8         },
 9         copy: (e) => {
10             console.log('copying', e)
11             let copyed_code = ""
12             e.target.dataset.data.children.forEach(item => {
13                 console.log(item)
14                 if (item.raw_tag == "ul" || (item.attrs.class && item.attrs.class.indexOf("h2w__lineNum") != -1)) {
15                     console.log('find number')
16                     return
17                 } else if (item.raw_tag == "p") {
18                     copyed_code = copyed_code + "\n\n"
19                 } else if (item.raw_tag == "br") {
20                     copyed_code = copyed_code + "\n"
21                 } else if (item.children) {
22                     item.children.forEach(child => {
23                         if (child.text) {
24                             copyed_code = copyed_code + child.text
25                         }
26                     })
27                 } else if (item.type == "text") {
28                     copyed_code = copyed_code + item.text
29                 }
30 
31             })
32             uni.setClipboardData({
33                 data: copyed_code,
34                 showToast: true,
35             });
36 
37         },
38     }
39 });
40 this.article = result

因为事件中的dataset传过来的是解析好的数据， 这里重新组件了一下， 代码有些简陋， 可以自行修改.