使用CSS或Javascript复制/剪切时从文本中删除样式

Question

哟,

好吧一直在这一个上涂鸦:如何复制/剪切风格的文字而不带任何款式的行李(背景颜色,颜色等)？

被挫败的几对攻击路线:

1. 使用:: select来区分文本样式？ 不起作用,:: style不会被复制
2. 使用jQuery的select绑定设置所选文本的样式 这仅适用于输入,而不适用于p,div
3. 通过使用jQuery绑定事件来复制/粘贴来拦截和删除样式？ 无法访问复制的对象以删除内容,尝试使用e.preventDefault(); 然后返回事件对象,但这也不起作用
4. 保存后修改剪贴板数据？ 也没有骰子,大多数浏览器不会让你进入这个没有闪存和一些排序确认

无论如何,想法？看起来它对于具有白色背景颜色的网站非常有用.

Answer 1

鉴于当前浏览器的功能，您可以拦截复制事件，获取没有样式的选择，并将其放入剪贴板。

我已经用 Chrome/Safari/Firefox 测试过这段代码。相信它也应该适用于 MS 浏览器。

document.addEventListener('copy', function(e) {
  const text_only = document.getSelection().toString();
  const clipdata = e.clipboardData || window.clipboardData;  
  clipdata.setData('text/plain', text_only);
  clipdata.setData('text/html', text_only);
  e.preventDefault();
});

Answer 2

我现在没有时间编写示例代码,但您可以通过键盘快捷键触发剪切/复制.它不适用于通过上下文菜单或"编辑"菜单选项进行剪切/复制,因为它依赖于在剪切或复制事件触发之前更改用户选择.

步骤:

1. 处理Ctrl- C和Ctrl- X键盘快捷键和Mac等效项.
2. 在此处理程序中,创建一个离屏元素(绝对位置,左边-10000px,比如说)并将选定的内容复制到其中.你可以使用window.getSelection().getRangeAt(0).cloneContents(),虽然你需要IE <9的单独代码,你应该检查选择是不是折叠.
3. 做任何你喜欢的事情来改变离屏元素内容的样式.
4. 移动选择以包含屏幕外元素的内容,以便剪切或复制此内容.
5. 添加一个短暂的延迟(几毫秒)使用window.setTimeout(),调用一个删除屏幕外元素并恢复原始选择的函数.