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

需实现如下功能
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 = 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.getElementById('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>
版权声明：本文为qq_41080490原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。