sbfkcel / towxml

微信小程序HTML、Markdown渲染库
https://github.com/sbfkcel/towxml/wiki
2.5k stars 315 forks source link

希望新增代码块复制按钮 #233

Open z1485671578 opened 2 years ago

z1485671578 commented 2 years ago

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

zhanlangorz commented 1 year ago

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

sbfkcel commented 1 year ago

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

zhanlangorz commented 1 year ago

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

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

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 commented 1 year ago

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

vijayasddd commented 1 year ago

你好 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 commented 1 year ago

感谢, 已修改为递归处理

vijayasddd commented 1 year ago

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

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

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 commented 1 year ago

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

zhanlangorz commented 1 year ago

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

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

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

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

vijayasddd commented 1 year ago

掉了行

好的 谢谢大佬

vijayasddd commented 1 year ago

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

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

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

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

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

zhanlangorz commented 1 year ago

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

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

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

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

FR997 commented 1 year ago

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

jipeigong commented 1 year ago

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

https://github.com/sbfkcel/towxml/issues/116#issuecomment-1436460122