您的位置：首页 > 移动开发 > 微信开发

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

2018-03-15 22:47 603 查看
需实现如下功能





思路：

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 = selObj.toString();
if (selectedText != '') {
// 移除copy监听事件
document.removeEventListener('copy', myFunction);
}else{
// 添加copy监听事件
document.addEventListener('copy',myFunction);
}
})
function myFunction(e) {
e.preventDefault();
e.clipboardData.setData('text/html', temp);
}


完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
<title>微信复制DEMO</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.demo {
width: 475px;
margin: 0 auto;
}

.demo-btn {
padding: 8px;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取到所需复制的代码
var temp = document.getElementById("target").innerHTML;
// 创建mousemove监听事件，当检测到有文字被选中，则移除copy，否则则添加copy
document.addEventListener('mousemove',function () {
let selObj = window.getSelection();
let selectedText = selObj.toString();
if (selectedText != '') {
// 移除copy监听事件
document.removeEventListener('copy', myFunction);
}else{
// 添加copy监听事件
document.addEventListener('copy',myFunction);
}
})
function myFunction(e) {
e.preventDefault();
e.clipboardData.setData('text/html', temp);
}
// 给button加click事件，当被点击时则创建一个copy事件，来触发上面的copy监听事件
var btn = document.getElementB
4000
yId('btn');
btn.addEventListener('click', function(){
document.execCommand("copy");
alert("已复制好，可贴粘。");
});
}
</script>
</head>

<body>
<section class="demo">
<section id="target" style="border: 0px none;">
<section style="width:96%;margin:0 auto;border:1px solid #42ae00;box-sizing:border-box;">
<section style="width:100%;">
<img src="http://mpt.135editor.com/mmbiz_png/fgnkxfGnnkTYZ3DkBFIxXm8lsgN4NDTNictzwiasXY6eSMG9jKKBneOwXuago6AYt2oibpdODMPia2mQ5E7om4FHhQ/0?wx_fmt=png"
style="width:100%;vertical-align:top;">
</section>
<section style="margin-top:-30px;display:flex;justify-content:center;">
<section style="width:2px;background-color:#42ae00;"></section>
<section style="background-color:rgba(66,174,0,0.9);padding-left:10px;padding-right:10px;padding-top:4px;padding-bottom:3px;margin-left:4px;margin-right:4px;">
<p id="dh" style="font-size:16px;color:#ffffff;min-width:1px;font-weight:bold;">春的故事</p>
</section>
<section style="width:1px;background-color:#42ae00;"></section>
</section>
<section style="margin-top:10px;padding-left:20px;padding-right:20px;padding-bottom:20px; font-size:14px;color:#464545;">
<p>立春是中国民间重要的传统节日之一。“立”是“开始”的意思，自秦代以来，中国就一直以立春作为孟春时节的开始。所谓“一年之计在于春”，春是温暖，鸟语花香；春是生长，耕耘播种。</p>
</section>
</section>
</section>
<section class="demo-btn">
<button id="btn">复制</button>
</section>
</section>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  微信工作平台编辑器 js复制功能
相关文章推荐
新的分享
章节导航