时间戳

首页 > 解决方案 > 使用 Typescript 修改复制选择的格式

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

问题描述

我希望修改从 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 对象类型的文档，并且无法弄清楚如何访问/修改格式。我可以用什么代替上面的评论来达到预期的结果？如果存在，我想保留任何与背景无关的格式。

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

标签： htmlcsstypescriptclipboard

解决方案

可以将 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>

您需要使用它来获得您想要的东西，并且您总是会受到您要粘贴到的应用程序的突发奇想的影响。例如，我尝试过的某些背景/前景组合不被 Word 接受。它只会在粘贴时将其更改为更正常的颜色。所以我认为这永远不会坚如磐石，但它可能会满足你的需要。

推荐阅读