微信小程序_实现markdown支持代码复制功能

文章目录

    • ⭐ 前言
    • ⭐ 复制代码功能实现
      • 基于towxml渲染markdown 定位
      • h2w__code language-css 类名下是渲染的代码块
        • 查找样式的判断源码
        • attr注入属性用来判断是否是代码块 code
        • 复制代码样式及事件绑定
        • 效果
    • ⭐ 结束

⭐ 前言

大家好,我是yma16,不止前端,本文将介绍微信小程序中 markdown的代码复制功能实现。
往期微信小程序文章
小程序自定义微信昵称和头像
小程序制作markdown博客
小程序结合chatgpt制作聊天页面
小程序组件传值
小程序复制到粘贴板的功能实现

⭐ 复制代码功能实现

基于towxml渲染markdown 定位

因为是基于towxml渲染的markdown
通过渲染元素快速定位代码块 code 的位置
在这里插入图片描述
通过选择元素,可找到class 名称h2w__viewParent即为渲染代码块的元素布局。

h2w__code language-css 类名下是渲染的代码块

定位元素的代码块渲染class
在这里插入图片描述

查找样式的判断源码

通过new mardown的过程我们找到class是通过attr的class注入

在这里插入图片描述

attr注入属性用来判断是否是代码块 code

区分的标志:tag是否为code使用includes判断
e.tag.includes(‘code’)

// 代码块判断
if(e.tag.includes('code')||item.name.includes('code')||attrs.class.includes('code')){attrs.isCodeBlock=trueattrs.element=e
}

复制代码样式及事件绑定

样式

<view 
wx:if="{{item.attrs.isCodeBlock}}" 
bindtap="cloneCode" 
data-code="{{item}}" 
data-attr-data="{{item.attrs.data}}" 
style="float: right;position: relative;top:-20px;user-select: none;">
复制代码
</view>

事件绑定

cloneCode(e) {const { code } = e.target.datasetconst { attrs } = codeconst { element } = attrsconst { child } = elementlet lineCount = 0const getCodeFormat = (array) => {let text = ''array.forEach(item => {if (item.tag && item.tag.includes('ul')) {// 多少行判断lineCount = item.child.length}else if (item.tag && item.tag.includes('span')) {// 子集的text 递归回去text += getCodeFormat(item.child)}else if (item.tag && item.tag.includes('br')) {// 换行标志text += '\n'}else if (item.text) {// 文字text += item.text}})return text}let content = getCodeFormat(child)wx.setClipboardData({data: content})wx.getClipboardData({success: (option) => {console.log(option)},})}

效果

复制打印测试和代码块一样,完全ok!
在这里插入图片描述
复制成功!
在这里插入图片描述

⭐ 结束

欢迎阅读,祝你生活愉快!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/33474.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chatgpt赋能python:使用Python向微信发送信息的方法详解

使用Python向微信发送信息的方法详解 Python作为一种广泛应用于科学计算、数据处理等多个领域的编程语言&#xff0c;也可以用于自动化工作流程和自动发送微信消息等操作&#xff0c;大大提高了工作效率。如果你想在日常工作中用Python向微信群或个人发送自定义信息&#xff0…

AI绘画工具软件网站合集:这些人工智能绘画生成器效果太赞了

那么有哪些口碑比较高的文本转图片的AI绘图软件呢?本文将跟大家分享一波出图效果相当不错的人工智能绘画工具网站&#xff0c;让大家实现“绘画自由”。 一、Disco Diffusion 简介:这是一款最早流行起来的AI绘图工具&#xff0c;直接在谷歌云端运行的程序&#xff0c;对电脑配…

AI - stable-diffusion(AI绘画)的搭建与使用

最近 AI 火的一塌糊涂&#xff0c;除了 ChatGPT 以外&#xff0c;AI 绘画领域也有很大的进步&#xff0c;以下几张图片都是 AI 绘制的&#xff0c;你能看出来么&#xff1f; 一、环境搭建 上面的效果图其实是使用了开源的 AI 绘画项目 stable-diffusion 绘制的&#xff0c;这是…

【社区图书馆】读《一本书读懂AIGC:ChatGPT、AI绘画、智能文明与生产力变革》所感

文章目录 《一本书读懂AIGC&#xff1a;ChatGPT、AI绘画、智能文明与生产力变革》目录作者简介我的体会&#xff1a; AI带来的挑战和机遇是不可避免的 《一本书读懂AIGC&#xff1a;ChatGPT、AI绘画、智能文明与生产力变革》 作者&#xff1a;a15a 著 贾雪丽 0xAres 张炯 主编 …

WIN10下搭建vue开发环境

好记性不如烂笔头。 说明&#xff1a;下面任何命令都是在windows的命令行工具下进行输入&#xff0c;打开命令行工具的快捷方式如下图&#xff1a; 详细的安装步骤如下&#xff1a; 一、安装node.js 说明&#xff1a;安装node.js的windows版本后&#xff0c;会自动安装好n…

bugku——分析(流量分析)题解

目录 1&#xff0c;flag被盗 2&#xff0c;中国菜刀 3&#xff0c;这么多数据包 4&#xff0c;手机热点 5&#xff0c;抓到一只苍蝇 6&#xff0c;日志审计 7&#xff0c;weblogic 8&#xff0c;信息提取&#xff08;超详细&#xff09; 9&#xff0c;特殊后门 1&…

CTF 总结04:win11+冰蝎4.0.6安装[更新中]

问题描述 昨天在刷题的时候&#xff0c;发现可能需要下载冰蝎~ win11冰蝎4.0.6&#xff0c;本人安装的时候遇到了一些坑&#xff0c;所以在这里简单说一下~ 冰蝎简介 冰蝎是一个动态二进制加密网站管理客户端&#xff0c;它使用AES加密算法对流量进行加密&#xff0c;难以被…

微软宣布 AI 聊天机器人必应聊天已向所有人开放,使用方法说明

微软宣布 AI 聊天机器人必应聊天已向所有人开放&#xff0c;使用方法说明 先用chrome搜索必应的地址必应搜索&#xff0c;结果如下图所示&#xff1a; 点击了解详细信息&#xff0c;网页会跳转到微软新必应的介绍页面&#xff0c;如下所示&#xff1a; 到这里大家就应该知道怎…

人工智能实战项目(python)+多领域实战练手项目

人工智能实战项目 大家好&#xff0c;我是微学AI&#xff0c;本项目将围绕人工智能实战项目进行展开&#xff0c;紧密贴近生活&#xff0c;实战项目设计多个领域包括&#xff1a;金融、教育、医疗、地理、生物、人文、自然语言处理等&#xff1b;帮助各位读者结合机器学习与深…

chatgpt赋能Python-pythonheader

Python Header&#xff1a;为什么它对SEO很重要&#xff1f; 在网页开发和建立过程中&#xff0c;Python Header是一个非常重要的元素。Python Header是一个HTTP请求的部分&#xff0c;其中包含了对请求的描述&#xff0c;以及执行此请求所需的任何信息。因此&#xff0c;Pyth…

解决:闹钟设置的自定义歌曲响铃时不会播放仅震动【Apple Music】【iOS】

文章目录 1、问题描述2、解决策略3、Q&A4、感受5、Tips 1、问题描述 自带铃声和震动脑瓜子嗡嗡的&#xff0c;幸好有apple music&#xff0c;在闹钟中可以轻松地选择你放入资料库中的任意一首音乐作为铃声。 奇怪的是&#xff0c;闹钟响起&#xff0c;仅震动&#xff0c;没…

微信公众平台登陆小程序后,在 开发-开发者工具 下,找不到 腾讯云

新版的微信公众平台在 “开发”-“开发者工具”下面只有“腾讯位置服务”&#xff0c;并没有大家所说的腾讯云&#xff0c;没法开通腾讯云服务。根据官方所说是把入口隐藏起来了。 我找了好久终于找到怎么开通了&#xff1a; 先去腾讯云官网注册/登录&#xff0c;登录后左上角…

Web端实现定位(使用腾讯地图实现)

1、腾讯地图提供定位服务的API&#xff0c;官方网址&#xff1a; 点击打开链接 2、从腾讯地图API官网注册一个开发秘钥 3、根据官方文档引入js文件 <script type"text/javascript" src"https://3gimg.qq.com/lightmap/components/geolocation/geolocation.…

【腾讯云IM】即时通讯的登录,登出,用户列表,私聊,图片发送

uniapp即时通讯 1&#xff0c;初始化&#xff08;刚开始就紧跟着文档走&#xff09;2&#xff0c;App.vue中项目引入腾讯云&#xff0c;&#xff08;附上账号在其他地方登陆的监听&#xff09;3&#xff0c;登录前必需3.1&#xff0c;获取登录id3.2&#xff0c;生成userSig&…

腾讯云开发者平台

1.应用场景 轻量级代码托管产品, 2.学习/操作 2.1 介绍 官网: coding.net 腾讯云开发者平台是腾讯云与 CODING 共同为开发者打造的云端工具平台&#xff0c;旨在为更多的开发者带去便捷、高效的 开发体验&#xff0c;提供包括需求管理、代码编写、代码管理、代码运行的整套系…

上传图片到腾讯云(海外服务器)com.qcloud5.5.4版本

问题描述&#xff1a;上传图片至腾讯云服务器&#xff0c;存储桶Region一直在国内地址&#xff0c;访问正常的&#xff0c;新启一个项目&#xff0c;存储桶Region迁移到孟买ap-mumbai区域&#xff0c;出现上传不成功 问题原因&#xff1a; <dependency><groupId>…

微信小程序接入腾讯云实时音视频TRTC----基本使用

前言:虽然说的有点乱,我觉得有必要说一下什么是音视频与整体开发需要些什么东西,因为当时我也是不知道这是啥? .我的理解音视频就是类似微信视频通话的东西,以自己的角度来看,我与好友建立视频的步骤简单来讲就是我把我的视频信息推送到微信,微信处理发给我好友,然后我再将好友…

【新知实验室】手把手实现腾讯云音视频应用

腾讯云音视频是什么&#xff1f; 腾讯云音视频&#xff08;TRTC&#xff09;提供一站式视频解决方案&#xff0c;包括点播直播、实时视频通话、短视频等视频服务&#xff0c;广泛应用于在线视频、电商、游戏直播、在线教育等场景。实时音视频基于腾讯21年来在网络与音视频技术上…

TBS腾讯浏览服务的SDK接入

Share Only 版 引入依赖库compile com.jakewharton:butterknife:7.0.1&#xff0c;与项目本身无关&#xff0c;不喜欢findViewById而已&#xff0c;这里有个小坑&#xff0c;最新版本的butterknife结合插件使用可能会导致findViewById或者onClick绑定失败…将shareOnly版本的j…

web端对接语音通话(腾讯云)

实时音视频 实时语音通话(Web) - 场景实践 - 文档中心 - 腾讯云 按照要求注册腾讯云账号&#xff0c;跑通demo 1、集成TRTCCalling组件 // npm方式安装 npm install trtc-js-sdk --save npm install tim-js-sdk --save npm install tsignaling --save npm install trtc-calli…