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

需实现如下功能
实现将html网页中的元素复制到微信编辑器中,并正常呈现排版_第1张图片
实现将html网页中的元素复制到微信编辑器中,并正常呈现排版_第2张图片

思路:
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);
}

完整代码:


<html lang="en">

<head>
  <title>微信复制DEMOtitle>
  <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>

你可能感兴趣的:(学习笔记)