Typora是我常常应用的一款软件，用来写MarkDown很舒服，有着十分优良的应用体验：

  • 实时预览
  • 自定义图片上传服务
  • 文档转换
  • 主题自定义

起因

不过我遇到一个十分好玩的事件，当我复制Typora内容粘贴到文本编辑器时，会失去MarkDown格局的内容；复制到富文本编辑器时，能够渲染出富文本成果：

复制到VS Code：

复制到其余富文本编辑器：

我很好奇为什么会呈现两种不同的后果，Typora应该是应用Electron(或相似技术)开发的，我尝试用Clipboard API来进行测试：

// 为什么应用setTimeout：我是在Chrome控制台进行的测试，clipboard依靠于页面，所以我须要设置1s延时，以便能够点击页面聚焦setTimeout(async()=>{    const clipboardItems = await navigator.clipboard.read();    console.log(clipboardItems)},1000)

而后看到了剪切板中有两种不同类型的内容：纯文本text/plain和富文本text/html。所以不同的内容接收者抉择了不同的内容作为数据，文本编辑器拿到的是纯文本，富文本编辑器获取的是富文本格式数据。

再来看看获取到的具体内容吧：

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)

Clipboard塞入数据试一下：

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: &quot;Open Sans&quot;, &quot;Clear Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Segoe UI Emoji&quot;, 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;"><span md-inline="plain" class="md-plain md-expand" style="box-sizing: border-box;">纯文本和富文本</span></h1>'],{type:'text/html'}),      })    ]);},[1000])

尝试了几个富文本编辑器失去的后果(不同富文本编辑器的具体实现可能存在差别)：

  • 如果只存在纯文本(仅保留上段代码中的纯文本局部), 会读取剪切板中纯文本内容
  • 如果存在纯文本和富文本，会读取剪切板中富文本内容

那这个成果是Typora帮咱们实现的吗？

咱们先来看一下复制富文本的默认行为，关上一个网页，复制网页文本，而后应用方才的代码尝试一下，看看读取到的剪切板内容。

咱们能够看到，在复制富文本的时候，Chrome实现的clipboard API都会生成两份后果，一份是纯文本格式text/plain，一份是富文本格式text/html。

不同的是：当咱们在Typora复制时，失去的是Markdown格局的纯文本和富文本，是Typora帮咱们进行了解决。

监听复制，写入剪切板

监听复制咱们能够应用HTMLElement.oncopy实现：

关上任意一个网页，切换到控制台：

document.body.oncopy = function(e){      console.log(e)    var text = e.clipboardData.getData("text");    console.log(text)}

复制页面中内容，咱们就能够的看到打印的后果了:

原本为数据会在clipboardData中，然而尝试了一下并没有获取到内容，看来只能另辟蹊径了，咱们能够通过Range API来获取选中的内容。

document.body.oncopy = function(e){    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'}),      })    ])}

监听复制还能够用来增加版权信息，比方下面代码中的额定信息就会呈现在复制的文本中。

对于复制和粘贴内容也能够通过document.execCommand，不过目前属于曾经被弃用的API，不倡议应用

参考文档：

ClipboardItem

Clipboard-write

element.oncopy

Selection

Range