当从网络浏览器复制粘贴到文本处理器时,HTML 标记被转换为富文本格式,文本处理器尝试将标记转换为它自己的格式。这证明剪贴板能够保存标记。
当在浏览器窗口之间复制粘贴时(复制到普通的 <textarea>
或其他元素),即使标记存在于剪贴板中,标记也会被忽略。
也许有一种解决方案可以让浏览器从剪贴板中选择富文本格式。
有没有办法在 <textarea>
中访问剪贴板的富文本?元素?
换句话说,
能否将必须位于剪贴板某处的标记(因为剪贴板还不知道用户是粘贴到文本处理器还是网络浏览器)被粘贴为- 是否进入 HTTP POST 变量?
最佳答案
我一直在研究类似的问题:从桌面应用程序粘贴到浏览器时如何访问富文本格式标签。我找到了以下文章并找到了可以解决您的问题的解决方案,但在撰写本文时它还没有解决我自己的问题。
https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/
JavaScript get clipboard data on paste event (Cross browser)
如果您要查找的只是格式化的 html(浏览器为您解析富文本的结果),答案是访问 clipboardData 对象并将其传递给“html”参数而不是“文本”参数。请参阅下面的示例(只需将以下内容粘贴到名为 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,一个用于所有其他浏览器。大致流程是:先捕捉paste事件,然后preventdefault,然后获取剪贴板数据为html,然后放入div中。这个例子的内容完全是从上面的两个链接中偷来的,但经过简化以排除我不需要的额外内容(即:管理浏览器焦点的隐藏输入以及对“复制”和“剪切”事件的支持)。完全归功于这些文章的作者。
根据我的经验(使用 mac 和 chrome),将格式化文本(即使使用删除线和缩进等晦涩的格式)粘贴到 #target div 中将很好地保持原始格式。祝你好运!
现在,如果有人能告诉我如何从剪贴板数据中获取实际富文本格式标签,请随时回答this question .谢谢!
关于javascript - 如何将剪贴板中的富文本粘贴到 HTML textarea 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28983016/