当从网络浏览器复制粘贴到文本处理器时,HTML标记将转换为富文本,文本处理器会尝试将标记转换为自己的格式。这证明剪贴板能够保持标记。
在浏览器窗口之间复制粘贴(转换为普通<textarea>
或其他元素)时,即使剪贴板中存在标记,也会忽略标记。
也许有一种解决方案可以让浏览器从剪贴板中选择富文本格式。
有没有办法在<textarea>
元素中访问剪贴板的富文本?
换句话说,
必须在剪贴板中某处的标记(因为剪贴板还不知道用户是否粘贴到文本处理器或网络浏览器中)被粘贴为 - 进入HTTP POST变量?
答案 0 :(得分:15)
我一直在研究类似的问题:如何在从桌面应用程序粘贴到浏览器时访问富文本格式标记。我找到了以下文章并找到了可以解决您问题的解决方案,尽管在撰写本文时它还没有解决我自己的问题。
1)https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/
2)JavaScript get clipboard data on paste event (Cross browser)
如果您要查找的是格式化的html(浏览器为您解析了富文本的结果),答案是访问 clipboardData 对象并将其传递给'html'参数而不是'text'参数。请参阅下面的示例(只需将以下内容粘贴到名为index.html的文件中并在本地运行):
<div id="target" contenteditable="true"></div>
<script>
document.addEventListener('paste', function(e) {
e.preventDefault();
var pastedText = ''
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else if (e.clipboardData && e.clipboardData.getData) {
pastedText = e.clipboardData.getData('text/html');
}
document.getElementById('target').innerHTML = pastedText
});
</script>
上面的示例拆分了两个版本的clipboardData.getData(),一个用于IE,另一个用于其他浏览器。粗略的过程是:首先捕获粘贴事件,然后防止默认,然后将剪贴板数据作为html,然后将其放入div。此示例的内容完全从上面的两个链接中窃取,但简化为排除我不需要的额外内容(即:隐藏输入以管理浏览器的焦点并支持“复制”和“剪切”事件)。应完全归功于这些文章的作者。
根据我的经验(使用mac和chrome)将格式化的文本(甚至使用删除线和缩进等模糊格式)粘贴到#target div中将保持原始格式相当好。祝你好运!
现在,如果有人可以通过电话告诉我如何从clipboardData获取实际富文本格式标记,请随时回答[此问题] [1]。谢谢!
[1]: https://stackoverflow.com/questions/30904507/javascript-get-the-rich-text-formatting-tags-from-the-clipboarddata
答案 1 :(得分:7)
假设剪贴板拥有&#34; HTML标记&#34;是不正确的。从浏览器(或使用多剪贴板格式的窗口)复制时,窗口以尽可能多的格式提供数据。这包括RTF格式(RTF)和纯文本。 粘贴文本时,desitination会选择它喜欢的内容或它可以呈现的内容。因此,纯文本框将选择纯文本,并且您的文字处理器将更喜欢富文本文本,并默认为纯文本副本。
编辑: 一些浏览器 - 包括Chrome&gt; v.37至少 - 可以在将内容复制到剪贴板时添加源HTML。这不是网络标准,因此不安全。
答案 2 :(得分:1)
Google Office支持RichText格式。从IE复制文本时,IE将以纯文本,富文本和html文本复制到剪贴板。因此,从IE复制到Google办公室将显示丰富的格式化文本。另一方面,FireFox仅复制纯文本和html文本格式的文本。因此,任何不接受HTML格式文本的目标都将以纯文本显示文本。
答案 3 :(得分:0)
我个人正在寻找一种解决方法,可以将rtf从剪贴板中提取出来并在此jsbin中进行管理:
console.log(event.clipboardData.types);
let paste = (event.clipboardData || window.clipboardData).getData('text/rtf');
用于在插入文本区域时分配内容而不会转义(请不要忘记更新querySelector + html):
target.value=paste
还有其他类型,如文件或html可用。我通过从Excel复制进行测试。
答案 4 :(得分:0)
感谢 Chris Chalmer 出色的回答,但如何让它更完整一点? 我更喜欢添加一些填充并获取代码...在 Edge、FF 和 Chrome 中测试,甚至在这里也能工作;-)
<div id="target" style="height: 75%;border:1px solid gray" contenteditable="true">Paste here...</div>
<textarea style="height:25%;width: 100%;"></textarea>
<script>
document.addEventListener('paste', function(e) {
e.preventDefault();
var pastedText = ''
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else if (e.clipboardData && e.clipboardData.getData) {
pastedText = e.clipboardData.getData('text/html');
}
var tmp1 = ["<div style=\"", "</div>"];
var tmp2 = [pastedText.indexOf(tmp1[0]) + tmp1[0].length, pastedText.lastIndexOf(tmp1[1])];
pastedText = tmp1[0] + "padding:8px;" + pastedText.substr(tmp2[0], tmp2[1] - tmp2[0]);
tmp1 = document.getElementById('target');
tmp1.innerHTML = pastedText;
tmp1.nextElementSibling.value = pastedText;
});
</script>