2020-002 关于剪贴板的故事—起源于公众号后台的一次探寻

关于剪贴板的故事—起源于公众号后台的一次探寻

整个事情的起源是这样的。

六月底，我打算重新开始更我停了很久的公众号，因为域名到期和图片自动上传不够便利的原因，我弃用了之前的vscode+markdown preview enhanced插件+qiniu-upload-image插件的写文方案。同时，vscode写markdown的换行总有问题，每次都要到网页转化工具进行大量重调，十分不爽。

在不停的搜索过后，我采用了来自KrisTM博客的Typora+PicGo的方案，解决了markdown编写和粘贴、拖拽图片自动上传（图片存储在Gitee仓库）的问题。但是转化问题还是出现了，博客里对于转化到公众号推文的部分是这样说的。

打开HTML，复制网页上的所有内容，直接粘贴到微信公众号编辑框里即可。

而我在实际操作中发现，不管是复制还是生成html，在粘贴到公众号后台时，均会出现如下情况。

这是什么鬼，说好的直接粘贴就行，结果，就这，就这？猜测应该是公众号后台改版了，这个博客写于2020年3月，才6月底就不能用了，可怕。

于是只能继续使用网页转化工具，Md2All和WeChat Format来进行markdown到公众号推文的转化。在网页上点击复制，然后到公众号后台粘贴，就有了内容。

问题似乎已经解决，但是我的好奇心属实被勾起来了。为什么在网页转化工具上点击复制，粘贴到公众号后台就有样式，而在Typora上复制，或者从其他地方复制，粘贴后都是纯文本呢？

对WeChat Format源码的研究

在实践中，我发现，在网页上点击复制后，不管是粘贴到QQ、Wechat，还是Vscode、Pycharm，都呈现的是纯文本形式，只有复制到公众号后台时，才有样式。我顿时对两个网站的复制位置背后的行为产生了好奇，认为这里面肯定有玄学操作。

为了探寻复制的奥秘，我找到了WeChat Format项目的源码，clone后进行查看。

整个项目基于vue，我在写主vue项目的editor.js找到了比较核心的copy、refresh、renderWeChat等函数，在对应到主页面index.html之后，可以发现，点击复制运行的就是copy，copy主要使用的是output区域的内容。

    copy: function () {
   
      var clipboardDiv = document.getElementById('output')
      clipboardDiv.focus();
      window.getSelection().removeAllRanges();  
      var range = document.createRange(); 
      range.setStartBefore(clipboardDiv.firstChild);
      range.setEndAfter(clipboardDiv.lastChild);
      window.getSelection().addRange(range);  
      try {
   
        if (document.execCommand('copy')) {
   
          this.$message({
   
            message: '已复制到剪贴板', type: 'success'
          })
        } else {
   
          this.$message({
   
            message: '未能复制到剪贴板，请全选后右键复制', type: 'warning'
          })
        }
      } catch (err) {
   
        this.$message({
   
          message: '未能复制到剪贴板，请全选后右键复制', type: 'warning'
        })
      }
    }

其中document.execCommand('copy')是最主要的一行内容，搜索后得知，这一行实现了Copies the current selection to the clipboard。也就是说，第4至8行实现了window.getSelection()区域的清空，添加