希望新增代码块复制按钮

[z1485671578]

希望可以新增一个代码块代码复制按钮，提升用户交互体验

[zhanlangorz]

我已经实现。原理可以参考
https://www.cnblogs.com/chuan2021/p/17223727.html

[sbfkcel]

这个可以有，我抽空加上。

[zhanlangorz]

这个可以有，我抽空加上。

辛苦. 还发现一个小问题，就是行内的代码块也出了复制按钮， 我增加了判断：

o.raw_tag = item.name

// code block has parent element with class "h2w__pre"
// inline block has parent element with class "h2w__p"
// inline block no support copy
if (item.name == "code" && item.parent && item.parent.attribs && item.parent.attribs.class) {
    if (item.parent.attribs.class === 'h2w__p') {
        o.raw_tag = "inline_code"
    }
}

[vijayasddd]

你好 html或者vue代码好像复制不出来

[vijayasddd]

你好 html或者vue代码好像复制不出来
需要用递归

  const closure = (item)=>{
                  item.children.forEach(child => {
                    if (child.text) {
                      copyed_code = copyed_code + child.text
                    }   if (child.children) closure(child);
                  })
                }
                closure(item);

[zhanlangorz]

感谢， 已修改为递归处理

[vijayasddd]

这个可以有，我抽空加上。

辛苦. 还发现一个小问题，就是行内的代码块也出了复制按钮， 我增加了判断：

o.raw_tag = item.name

// code block has parent element with class "h2w__pre"
// inline block has parent element with class "h2w__p"
// inline block no support copy
if (item.name == "code" && item.parent && item.parent.attribs && item.parent.attribs.class) {
    if (item.parent.attribs.class === 'h2w__p') {
        o.raw_tag = "inline_code"
    }
}

请问一下这个判断加在哪里

[vijayasddd]

这个我加了之后还是会出现内联代码显示复制

[zhanlangorz]

这个我加了之后还是会出现内联代码显示复制

parse/index.js 中。 你可以在copy函数里把数据打出来看看是怎么样的。 decode.wxml中已经判断了， raw_tag == 'code' 才展示这个复制按钮。

我自己观察发现只有大片的代码样式的父元素才是pre. 所以这里的思路是，父元素的class是带pre的， 才是非行内代码样式。

用这个逻辑排除掉了行内的代码。

[vijayasddd]

掉了行

好的 谢谢大佬

[vijayasddd]

这个我加了之后还是会出现内联代码显示复制

parse/index.js 中。 你可以在copy函数里把数据打出来看看是怎么样的。 decode.wxml中已经判断了， raw_tag == 'code' 才展示这个复制按钮。

我自己观察发现只有大片的代码样式的父元素才是pre. 所以这里的思路是，父元素的class是带pre的， 才是非行内代码样式。

用这个逻辑排除掉了行内的代码。

请问一下怎么判断pre呢 试了一下没成功

[zhanlangorz]

这个我加了之后还是会出现内联代码显示复制

parse/index.js 中。 你可以在copy函数里把数据打出来看看是怎么样的。 decode.wxml中已经判断了， raw_tag == 'code' 才展示这个复制按钮。
我自己观察发现只有大片的代码样式的父元素才是pre. 所以这里的思路是，父元素的class是带pre的， 才是非行内代码样式。
用这个逻辑排除掉了行内的代码。

请问一下怎么判断pre呢 试了一下没成功

你可以看我文章里的内容， 判断的是父元素的class是不是带有h2w__pre. 不过你提醒了我。 这一行可能存在bug. parse/index.js里。 严格来写， 应该是要模糊匹配的。
if (item.parent.attribs.class === 'h2w__p') {
改成
if (item.parent.attribs.class.indexOf('h2w__p') != -1) {

[FR997]

大佬，我的events 事件都不生效呢，有什么需要注意的吗

[jipeigong]

大佬，我的events 事件都不生效呢，有什么需要注意的吗

#116 (comment)