开发篇之复制代码块内容并打开新窗口，三种功能按钮

介绍下三种功能按钮，第一种单一复制代码块代码，第二种复制单个代码块内容并打开新窗口，第三种复制多个代码块内容并打开新窗口

下面代码的特点就是比官方多了个错误提示。（无法复制时弹出提示窗口！）

因为有些手机浏览器是无法设置剪切板写入权限的，所以是无法复制的，已测试手机QQ浏览器，华为自带浏览器，夸浏览器是不行的。测试可以的是手机谷歌浏览器。电脑浏览器基本上都能复制。

代码块单一复制代码，直接复制到编辑器里面即可。有技术的可以做成插件。

在线演示地址：https://3qpd.com/read-486-1.html

<button id="copy-btn" class="pk-btn pk-btn-success">复制代码</button>
<script>
  document.getElementById('copy-btn').addEventListener('click', function() {
    copyPreCode();
  });
  async function copyPreCode() {
    try {
      var preTags = document.getElementsByTagName('pre');
      if (preTags.length > 0) {
        var code = [].map.call(preTags, function(preTag) { return preTag.innerText; });
        // 在每行代码后面添加换行符
        code = code.join('\n\n\n');
        await navigator.clipboard.writeText(code);
        alert("代码已复制到剪贴板！");
      } else {
        alert("当前页面中没有找到代码块！");
      }
    } catch (err) {
      alert("未开启剪贴板权限！请手动复制！" + err);
    }
  }
</script>

复制单个代码块内容并打开新窗口

在线演示地址：https://3qpd.com/read-484-1.html

复制多个个代码块内容并打开新窗口

在线演示地址：https://3qpd.com/read-485-1.html