我从Typora中学到的Clipboard妙用.md

作者: 一颗小行星_混沌前端 | 来源:发表于2021-11-23 10:34 被阅读0次

<section data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px;color: black;padding-right: 10px;padding-left: 10px;line-height: 1.6;letter-spacing: 0px;word-break: break-word;overflow-wrap: break-word;text-align: left;font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;">Typora是我经常使用的一款软件，用来写MarkDown很舒适，有着非常优秀的使用体验：<ul data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;" class="list-paddingleft-2"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">实时预览</section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">自定义图片上传服务</section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">文档转换</section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">主题自定义</section></li></ul><h4 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 18px;">起因</h4>不过我遇到一个非常好玩的事情，当我复制Typora内容粘贴到文本编辑器时，会得到MarkDown格式的内容；复制到富文本编辑器时，可以渲染出富文本效果：复制到VS Code：<figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"><img class="rich_pages wxw-img" data-ratio="0.3086053412462908" data-src="https://mmbiz.qpic.cn/mmbiz_png/W3l2MicKwvncx1H7AMC3h24TaNYmKF6obqLcicVMgQhMfggYM5ibYpfjPlJibJMumvmiawZInX0do3BNccibK9RKnkAg/640?wx_fmt=png" data-type="png" data-w="674" style="display: block;margin-right: auto;margin-left: auto;" src="https://img.haomeiwen.com/i1762959/99bb9edc7cbab402.png"><figcaption style="margin-top: 5px;text-align: center;color: #888;font-size: 14px;">VS Code</figcaption></figure>复制到其他富文本编辑器：<figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"><img class="rich_pages wxw-img" data-ratio="0.27976190476190477" data-src="https://mmbiz.qpic.cn/mmbiz_png/W3l2MicKwvncx1H7AMC3h24TaNYmKF6obLX5wKgRUJSoXibACCiahUSg6NLI8Vqunh6QiagkRiclDJcA9tiaoaqSsedw/640?wx_fmt=png" data-type="png" data-w="840" style="display: block;margin-right: auto;margin-left: auto;" src="https://img.haomeiwen.com/i1762959/678716ae3a012bc6.png"><figcaption style="margin-top: 5px;text-align: center;color: #888;font-size: 14px;">富文本编辑器</figcaption></figure>我很好奇为什么会出现两种不同的结果，Typora应该是使用Electron(或类似技术)开发的，我尝试用Clipboard API来进行测试：<pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block;background: url("https://mmbiz.qpic.cn/mmbiz_svg/jj4e65x0Px15BZxBd7r39KpeORazlbVszTdwOdco6CzDhDPzSGgDCiaCS9X6QF96MFpVAX1D05V3QnckFZPLAZxuia6GIn6Do2/640?wx_fmt=svg") 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;width: 100%;margin-bottom: -7px;border-radius: 5px;"><code style="overflow-x: auto;padding: 16px;color: #abb2bf;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;font-size: 12px;-webkit-overflow-scrolling: touch;padding-top: 15px;background: #282c34;border-radius: 5px;">// 为什么使用setTimeout：我是在Chrome控制台进行的测试，clipboard依托于页面，所以我需要设置1s延时，以便可以点击页面聚焦
setTimeout(async()=>{
 const clipboardItems = await navigator.clipboard.read();
 console.log(clipboardItems)
},1000)</code></pre>然后看到了剪切板中有两种不同类型的内容：纯文本<code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;">text/plain</code>和富文本<code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;">text/html</code>。所以不同的内容接收者选择了不同的内容作为数据，文本编辑器拿到的是纯文本，富文本编辑器获取的是富文本格式数据。<figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"><img class="rich_pages wxw-img" data-ratio="0.5298329355608592" data-src="https://mmbiz.qpic.cn/mmbiz_png/W3l2MicKwvncx1H7AMC3h24TaNYmKF6obfoRYo1GIYcfFOehRW8ERJSEtcxsOWgGS1y61dfp95fRDaNuYjIFK8Q/640?wx_fmt=png" data-type="png" data-w="419" style="display: block;margin-right: auto;margin-left: auto;" src="https://img.haomeiwen.com/i1762959/2caf449a4925d055.png"><figcaption style="margin-top: 5px;text-align: center;color: #888;font-size: 14px;">结果</figcaption></figure>再来看看获取到的具体内容吧：<pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block;background: url("https://mmbiz.qpic.cn/mmbiz_svg/jj4e65x0Px15BZxBd7r39KpeORazlbVszTdwOdco6CzDhDPzSGgDCiaCS9X6QF96MFpVAX1D05V3QnckFZPLAZxuia6GIn6Do2/640?wx_fmt=svg") 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;width: 100%;margin-bottom: -7px;border-radius: 5px;"><code style="overflow-x: auto;padding: 16px;color: #abb2bf;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;font-size: 12px;-webkit-overflow-scrolling: touch;padding-top: 15px;background: #282c34;border-radius: 5px;">setTimeout(async()=>{
 const clipboardItems = await navigator.clipboard.read();
 console.log(clipboardItems)
 for (const clipboardItem of clipboardItems) {
 for (const type of clipboardItem.types) {
 const contentBlob = await clipboardItem.getType(type)
 const text = await contentBlob.text()
 console.log(text)
 }
 }
},1000)</code></pre><figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"><img class="rich_pages wxw-img" data-ratio="0.2914798206278027" data-src="https://mmbiz.qpic.cn/mmbiz_png/W3l2MicKwvncx1H7AMC3h24TaNYmKF6obwbiarM1EjNAiaobuOes6icc1QLLotM63JNWA2PW076AalS4LGzAp1RjXA/640?wx_fmt=png" data-type="png" data-w="1115" style="display: block;margin-right: auto;margin-left: auto;" src="https://img.haomeiwen.com/i1762959/aff2528f0eb73dd6.png"><figcaption style="margin-top: 5px;text-align: center;color: #888;font-size: 14px;">image-20211117193144843</figcaption></figure>Clipboard塞入数据试一下：<pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block;background: url("https://mmbiz.qpic.cn/mmbiz_svg/jj4e65x0Px15BZxBd7r39KpeORazlbVszTdwOdco6CzDhDPzSGgDCiaCS9X6QF96MFpVAX1D05V3QnckFZPLAZxuia6GIn6Do2/640?wx_fmt=svg") 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;width: 100%;margin-bottom: -7px;border-radius: 5px;"><code style="overflow-x: auto;padding: 16px;color: #abb2bf;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;font-size: 12px;-webkit-overflow-scrolling: touch;padding-top: 15px;background: #282c34;border-radius: 5px;">setTimeout(async ()=>{
await navigator.clipboard.write([
 new ClipboardItem({
 ["text/plain"]: new Blob(['# 纯文本和富文本'],{type:'text/plain'}),
 ["text/html"]: new Blob(['<h1 cid="n21" mdtype="heading" class="md-end-block md-heading md-focus" style="box-sizing: border-box; break-after: avoid-page; break-inside: avoid; orphans: 4; font-size: 2.25em; margin-top: 1rem; margin-bottom: 1rem; position: relative; font-weight: bold; line-height: 1.2; cursor: text; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); white-space: pre-wrap; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, "Segoe UI Emoji", sans-serif; font-style: normal; font-variant-caps: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration: none;">纯文本和富文本</h1>'],{type:'text/html'}),
 })
 ]);
},[1000])</code></pre>尝试了几个富文本编辑器得到的结果(不同富文本编辑器的具体实现可能存在差异)：<ul data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;" class="list-paddingleft-2"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">如果只存在纯文本(仅保留上段代码中的纯文本部分), 会读取剪切板中纯文本内容</section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">如果存在纯文本和富文本，会读取剪切板中富文本内容</section></li></ul><section class="mp_profile_iframe_wrp"><mpprofile class="js_uneditable custom_select_card mp_profile_iframe" data-pluginname="mpprofile" data-id="MzAwMDM3ODUwOQ==" data-headimg="http://mmbiz.qpic.cn/mmbiz_png/W3l2MicKwvnc7ictL6cJFmUAe3zW0Y9DOz4PRX6p86sMPDia9JGjibMV66tVgcjDBgaFs9OrsbLkFOUsD2IDQv5UDw/0?wx_fmt=png" data-nickname="混沌前端" data-alias="chaos-fe" data-signature="分享技术、工作和生活。" data-from="0"></mpprofile></section><h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">那这个效果是Typora帮我们实现的吗？</h3>我们先来看一下复制富文本的默认行为，打开一个网页，复制网页文本，然后使用刚才的代码尝试一下，看看读取到的剪切板内容。<figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"><img class="rich_pages wxw-img" data-ratio="0.35602094240837695" data-src="https://mmbiz.qpic.cn/mmbiz_png/W3l2MicKwvncx1H7AMC3h24TaNYmKF6obzYyZYJqHNMgdyXnp1ibX8icZA9xibiacLQea9aaIvqo6ibia4abib3V4iaaJEg/640?wx_fmt=png" data-type="png" data-w="955" style="display: block;margin-right: auto;margin-left: auto;" src="https://img.haomeiwen.com/i1762959/799fd4eb2bc0f27b.png"><figcaption style="margin-top: 5px;text-align: center;color: #888;font-size: 14px;">image-20211118103737687</figcaption></figure>我们可以看到，在复制富文本的时候，Chrome实现的clipboard API都会生成两份结果，一份是纯文本格式<code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;">text/plain</code>，一份是富文本格式<code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;">text/html</code>。不同的是：当我们在Typora复制时，得到的是Markdown格式的纯文本和富文本，是Typora帮我们进行了处理。<h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">监听复制，写入剪切板</h3>监听复制我们可以使用HTMLElement.oncopy实现：打开任意一个网页，切换到控制台：<pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block;background: url("https://mmbiz.qpic.cn/mmbiz_svg/jj4e65x0Px15BZxBd7r39KpeORazlbVszTdwOdco6CzDhDPzSGgDCiaCS9X6QF96MFpVAX1D05V3QnckFZPLAZxuia6GIn6Do2/640?wx_fmt=svg") 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;width: 100%;margin-bottom: -7px;border-radius: 5px;"><code style="overflow-x: auto;padding: 16px;color: #abb2bf;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;font-size: 12px;-webkit-overflow-scrolling: touch;padding-top: 15px;background: #282c34;border-radius: 5px;">document.body.oncopy = function(e){
 console.log(e)
 var text = e.clipboardData.getData("text");
 console.log(text)
}</code></pre>复制页面中内容，我们就可以的看到打印的结果了:<figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"><img class="rich_pages wxw-img" data-ratio="0.5237515225334958" data-src="https://mmbiz.qpic.cn/mmbiz_png/W3l2MicKwvncx1H7AMC3h24TaNYmKF6obPqPdtt1wI0HTRm14XfbD9Xk6wFEsZ7PhiadXKiavI7menRXSbliaRCeTw/640?wx_fmt=png" data-type="png" data-w="821" style="display: block;margin-right: auto;margin-left: auto;" src="https://img.haomeiwen.com/i1762959/3d7d6a6f738f1f1f.png"><figcaption style="margin-top: 5px;text-align: center;color: #888;font-size: 14px;">监听复制</figcaption></figure>本来为数据会在clipboardData中，但是尝试了一下并没有获取到内容，看了一下API, 需要在copy事件中通过setData设置数据，在paste时间中getData获取数据。我们可以通过Selection API来获取选中的内容。<pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block;background: url("https://mmbiz.qpic.cn/mmbiz_svg/jj4e65x0Px15BZxBd7r39KpeORazlbVszTdwOdco6CzDhDPzSGgDCiaCS9X6QF96MFpVAX1D05V3QnckFZPLAZxuia6GIn6Do2/640?wx_fmt=svg") 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;width: 100%;margin-bottom: -7px;border-radius: 5px;"><code style="overflow-x: auto;padding: 16px;color: #abb2bf;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;font-size: 12px;-webkit-overflow-scrolling: touch;padding-top: 15px;background: #282c34;border-radius: 5px;">document.addEventListener('copy', function(e){
 e.preventDefault(); // 防止我们筛入的数据被覆盖
 const selectionObj = window.getSelection()
 const rangeObj = selectionObj.getRangeAt(0)
 const fragment = rangeObj.cloneContents() // 获取Range包含的文档片段
 const wrapper = document.createElement('div')
 wrapper.append(fragment)
 e.clipboardData.setData('text/plain', wrapper.innerText + '额外的文本');
 e.clipboardData.setData('text/html', wrapper.innerHTML+ '<h1>额外的文本</h1>');
});</code></pre>或者使用clipboard.write实现写入：<pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block;background: url("https://mmbiz.qpic.cn/mmbiz_svg/jj4e65x0Px15BZxBd7r39KpeORazlbVszTdwOdco6CzDhDPzSGgDCiaCS9X6QF96MFpVAX1D05V3QnckFZPLAZxuia6GIn6Do2/640?wx_fmt=svg") 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;width: 100%;margin-bottom: -7px;border-radius: 5px;"><code style="overflow-x: auto;padding: 16px;color: #abb2bf;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;font-size: 12px;-webkit-overflow-scrolling: touch;padding-top: 15px;background: #282c34;border-radius: 5px;">document.body.oncopy = function(e){
 e.preventDefault();
 const selectionObj = window.getSelection()
 const rangeObj = selectionObj.getRangeAt(0)
 const fragment = rangeObj.cloneContents() // 获取Range包含的文档片段
 const wrapper = document.createElement('div')
 wrapper.append(fragment)
 navigator.clipboard.write([
 new ClipboardItem({
 ["text/plain"]: new Blob([wrapper.innerText,'额外的文本'],{type:'text/plain'}),
 ["text/html"]: new Blob([wrapper.innerHTML,'<h1>额外的富文本</h1>'],{type:'text/html'}),
 })
 ])
}</code></pre>监听复制还可以用来添加版权信息，比如上面代码中的额外信息就会出现在复制的文本中。<section class="mp_profile_iframe_wrp"><mpprofile class="js_uneditable custom_select_card mp_profile_iframe" data-pluginname="mpprofile" data-id="MzAwMDM3ODUwOQ==" data-headimg="http://mmbiz.qpic.cn/mmbiz_png/W3l2MicKwvnc7ictL6cJFmUAe3zW0Y9DOz4PRX6p86sMPDia9JGjibMV66tVgcjDBgaFs9OrsbLkFOUsD2IDQv5UDw/0?wx_fmt=png" data-nickname="混沌前端" data-alias="chaos-fe" data-signature="分享技术、工作和生活。" data-from="0"></mpprofile></section><blockquote data-tool="mdnice编辑器" style="border-top: none;border-right: none;border-bottom: none;font-size: 0.9em;overflow: auto;border-left-color: rgba(0, 0, 0, 0.4);background: rgba(0, 0, 0, 0.05);color: rgb(106, 115, 125);padding: 10px 10px 10px 20px;margin-bottom: 20px;margin-top: 20px;">对于复制和粘贴内容也可以通过document.execCommand，不过目前属于已经被弃用的API，不建议使用</blockquote><figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"><img class="rich_pages wxw-img" data-ratio="0.5555555555555556" data-src="https://mmbiz.qpic.cn/mmbiz_png/W3l2MicKwvncx1H7AMC3h24TaNYmKF6obm2SzkW4ia8y9yrproqMXRR7lhXqdLjbVI3Efmziawxf8O6TGKRVfCReA/640?wx_fmt=png" data-type="png" data-w="900" style="display: block;margin-right: auto;margin-left: auto;" src="https://img.haomeiwen.com/i1762959/e27ecbd699de47f1.png"><figcaption style="margin-top: 5px;text-align: center;color: #888;font-size: 14px;">chaos-fe</figcaption></figure><h4 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 18px;">参考文档：</h4>ClipboardItemClipboard-writeelement.oncopySelectionRange</section>

我从Typora中学到的Clipboard妙用.md

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读