实现将html网页中的元素复制到微信编辑器中,并正常呈现排版

本文介绍如何利用JavaScript实现将HTML网页中的元素复制并保持排版地粘贴到微信工作平台编辑器中。主要步骤包括使用innerHTML获取代码段,通过addEventListener监听copy事件,结合clipboardData.setData设置HTML格式,利用document.execCommand触发复制操作,同时解决普通复制功能不受影响的问题。
摘要由CSDN通过智能技术生成

需实现如下功能
html
微信平台

思路:
1、使用innerHTML获取需要复制的代码段

var temp = document.getElementById("target").innerHTML

2、使用addEventListener创建一个监听事件,来监听copy事件,并使用clipboardData.setData方法来将代码复制到计算机的粘贴板(clipboardData.setData第一个参数可以使用’text/html’,这样格式就是html的,可以在公众平台上使用,设置该参数的时候需要放在addEventListener的函数内才可以)

document.addEventListener('copy',myFunction);
function myFunction(e) {
   
    e.preventDefault(); 
    e.clipboardData.setData('text/html', temp);
}

3、给button加click事件,当被点击时则创建一个copy事件,来触发上面的copy监听事件(此处可以使用document.execCommand方法来触发copy事件)

var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
   
    document.execCommand("copy");
    alert("已复制好,可贴粘。");
});

4、此时还没有结束,这个时候虽然可以复制,但是不能实现普通的ctrl+c的复制文字方法,因为用ctrl+c复制的时候也会被监听到,当做copy事件来处理,所以可以使用window.getSelection()获取选中文字,来对当前页面是否有文字被选中来做判断

document.addEventListener('mousemove',function () {
   
    let selObj = window.getSelection(); 
    let selectedText &#
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值