系统生成带样式的网页复制到微信公众平台编辑器

产品需求：按条件生成要展示的数据并套用微信编辑器模板。使用js等复制生成的数据和模板到微信公众平台发布 (实现将html网页中的元素复制到微信编辑器中，并正常呈现排版)

一、找模板、用模板

吃现成的最快，如135编辑器、96编辑器等，搜索微信编辑器可得
部分模板是平台VIP特权使用，不过因为这个样式都是连同样式一起的，所以不必纠结VIP，F12审查元素获得任意模板！
找到代码位置，复制出来
使用自带的编辑器，切换成HTML模式，把复制的文件粘贴进去
取消HTML模式，可以用了！

使用图例：

键盘F12键打开浏览器调试

选中模板块位置，鼠标右键 Edit as HTML

复制HTML文件注意section开始和结尾

使用编辑器源代码模式，点击HTML

粘贴复制的代码

退出HTML模式，可以用了

二、网页形式复制遇到的问题

关于复制的问题，zeroclipboard 种种原因谷歌浏览器无法使用(2021年将不再支持flash)
如果不用复制按钮，直接使用复制会导致部分样式丢失
如果使用复制按钮，复制到公众平台编辑器会使自己上传的图片(非模板原有的元素)偏位(偏左)

解决方案：

经查找资料在csdn中找到可复制的方案

<!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>
————————————————
原文链接：https://blog.csdn.net/qq_41080490/java/article/details/79571194