towxml支持代码复制功能(支持uni-app)

uni-app中使用towxml

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

 

在微信小程序中的效果:

展示的css可自行调整

 

支持代码复制:

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

item.tag == "view" 一段中, 这里先在parse/index.js中增加一个参数， 好判断是不是代码块,  增加第18-27行,  为代码块和行内代码块增加raw_tag, 行内代码块不支持复制, 修改结果:

arr.forEach(item => {
    if (item.type === 'comment') {
        return;
    };
    let o = {
            type: item.type === 'text' ? 'text' : isRichTextContent ? 'node' : item.type
        },
        e = {},
        attrs = o.attrs = item.attribs || {};
    if (item.type === 'text') {
        o.text = e.text = item.data;
    } else {
        if (isRichTextContent) {
            o.name = item.name;
        } else {
            o.tag = getWxmlTag(item.name); // 转换之后的标签
            // o.tag = o.tag === 'text' ? 'view' : o.tag;
            o.raw_tag = item.name
            
            // code block has parent element with class "h2w__pre"
            // inline block has parent element with class "h2w__p" or "h2w__li"
            // inline block no support copy
            if (item.name == "code" && item.parent && item.parent.attribs && item.parent.attribs.class) {
                if (item.parent.attribs.class.indexOf('h2w__pre') === -1) {
                    o.raw_tag = "inline_code"
                }
            }

            e.tag = item.name; // 原始
            o.attrs = item.attribs;
            e.attrs = JSON.parse(JSON.stringify(attrs));
        };
        attrs.class = attrs.class ? `h2w__${item.name} ${attrs.class}` : `h2w__${item.name}`;

        // 处理资源相对路径
        if (base && attrs.src) {
            let src = attrs.src;
            switch (src.indexOf('//')) {
                case 0:
                    attrs.src = `https:${src}`;
                    break;
                case -1:
                    attrs.src = `${base}${src}`;
                    break;
            };
        };
    };

    o.rely = relyList.indexOf(e.tag) > -1; // 判断是否不能嵌套其它标签

    if (item.children) {
        eachFn(item.children, o, e, isRichTextContent || item.name === 'rich-text');
    };
    child.push(o);
    child_e.push(e);
});

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

towxml/decode.wxml

<block wx:if="{{item.tag==='view'}}">
    <block wx:if="{{item.rely}}">
        <view data-data="{{item}}" class="{{item.attrs.class}}" data="{{item.attrs.data}}" id="{{item.attrs.id}}" style="{{item.attrs.style}}" catch:tap="_tap">
            <decode wx:if="{{item.children}}" nodes="{{item}}"/>
        </view>
    </block>
    <block wx:else>
        <view class="h2w__viewParent">
            <view data-data="{{item}}" class="{{item.attrs.class}}" data="{{item.attrs.data}}" id="{{item.attrs.id}}" style="{{item.attrs.style}}" catch:tap="_tap">
                <block wx:if="{{item.raw_tag === 'code'}}">
                    <view style="float: right" catch:tap="_copy" data-data="{{item}}" data="{{item.attrs.data}}">复制</view>
                </block>
                <decode wx:if="{{item.children}}" nodes="{{item}}"/>
            </view>
        </view>
    </block>
</block>

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

    events:[
        // 'touchstart',
        // 'touchmove',
        // 'touchcancel',
        // 'touchend',
        'tap',                      // 用于元素的点击事件
        'change',                   // 用于todoList的change事件
        'copy',                     // 代码复制事件
    ],

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

let md = this.$towxml(src,
    'markdown', {
        // base: 'https://xxx.com', // 相对资源的base路径
        theme: 'light', // 主题，默认`light`
        events: { // 为元素绑定的事件方法
            tap: (e) => {
                console.log('tap', e);
            },
            copy: (e) => {
                console.log(e.target.dataset.data)
                let copyed_code = ""
                
                const extract_code = (parsed_item) => {
                    if (!parsed_item.children) {
                        return
                    }
                    parsed_item.children.forEach(item => {
                        if (item.raw_tag == "ul" || (item.attrs.class && item.attrs.class
                                .indexOf("h2w__lineNum") != -1)) {
                            console.log('find number')
                            return
                        } else if (item.raw_tag == "p") {
                            copyed_code = copyed_code + "\n\n"
                        } else if (item.raw_tag == "br") {
                            copyed_code = copyed_code + "\n"
                        } else if (item.type == "text") {
                            copyed_code = copyed_code + item.text
                        } else {
                            extract_code(item)
                        }
                    })
                }
                
                extract_code(e.target.dataset.data)
                
                uni.setClipboardData({
                    data: copyed_code,
                    showToast: true,
                });
            },
        }
    });
this.article = md;

 

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