使用 Typescript 修改复制选择的格式

Question

我想要修改从 div 制作的任何副本，省略剪贴板中的任何背景格式信息。本质上，这是我得到的代码：

$('#selected-div').off('copy').on('copy', () => {
   var selectedContent = document.getSelection();
   // modify the formatting of selectedContent to omit any background styling
   navigator.clipboard.write(selectedContent);
});

我正在努力解释 Selection 对象类型的文档，无法弄清楚如何 access/modify 格式化。我可以用什么来代替上面的评论来达到预期的结果？我想保留任何与背景无关的格式（如果存在）。

我也不确定 clipboard.write() 函数是否可行。我的开发工作室正在报告一个错误，声称 'write' 不是类型 'Clipboard' 的属性，并且一些研究似乎表明此功能并未得到普遍支持。我可以让 writeText 可靠地工作，但我确实需要将复制的文本与选择的任何非背景格式规则相关联。有没有更好的函数可用于将 Selection 对象复制到剪贴板？

Answer 1

可以将html内容设置到剪贴板。这就是用户从网站复制文本时发生的情况。您可以通过粘贴到此工具来准确查看复制到剪贴板的内容：https://evercoder.github.io/clipboard-inspector/

例如，如果我复制您问题的第一个短语并将其粘贴进去，我会得到：

根据该输出，您可以执行类似这样的操作，以不同于屏幕上显示的格式设置复制文本的格式：

const style = "color: rgb(0, 255, 0); font-family: -apple-system, BlinkMacSystemFont, \";Segoe UI\", \"Liberation Sans\", sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(80, 80, 100); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;";

document.querySelector(".text")
  .addEventListener("copy", event => {
    const text = document.getSelection().toString();
    const span = document.createElement("span");
    span.setAttribute("style", style);
    span.innerText = text;
    event.clipboardData.setData("text/html", span.outerHTML);
    event.preventDefault();
  });

.text {
  background: #333;
  color: #fff;
  padding: 1rem;
}

<div class="text">
  Distinctio sint odit debitis possimus esse dolorem officiis ipsa. Laboriosam repellendus deleniti voluptates similique. Nesciunt eos eius dolorum consequatur labore mollitia cum. Qui cumque amet ut quia ipsam dolore eos. Quaerat aperiam enim quasi nihil.
</div>

您需要尝试一下才能得到您想要的东西，而且您总是会受到要粘贴到的应用程序的异想天开的影响。例如，我尝试过的某些 background/foreground 组合不被 Word 接受。它只会在粘贴时将其更改为更正常的颜色。所以我认为这永远不会坚如磐石，但它可能会满足您的需求。

使用 Typescript 修改复制选择的格式

Modify formatting of a copied selection using Typescript

html

css

clipboard

typescript