javascript 如何将富文本从剪贴板粘贴到 HTML textarea 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28983016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to paste rich text from clipboard to HTML textarea element?
提问by Roland Seuhs
When copy-pasting from a web-browser to a text-processor, the HTML-markup is converted into rich text and the text-processor tries to convert the markup into it's own format. This proves that the Clipboard is able to hold markup.
当从 web 浏览器复制粘贴到文本处理器时，HTML 标记被转换为富文本，文本处理器尝试将标记转换为它自己的格式。这证明剪贴板能够容纳标记。
When copy-pasting between browser-windows (into a normal <textarea>or other element), then the markup is ignored, even though the markup exists in the clipboard.
在浏览器窗口之间复制粘贴（到普通<textarea>元素或其他元素中）时，即使标记存在于剪贴板中，也会忽略标记。
Maybe there is a solution that makes the browser pick the rich text format from the clipboard.
也许有一个解决方案可以让浏览器从剪贴板中选择富文本格式。
Is there a way to access the rich text of the clipboard in an <textarea>element?
有没有办法访问<textarea>元素中剪贴板的富文本？
In other words,
换句话说，
Can the markup that has to be somewhere in the clipboard(because the clipboard does not know yet whether the user pastes into a text-processor or a web-browser) be pasted as-is into a HTTP POST variable?
必须在剪贴板某处的标记（因为剪贴板还不知道用户是粘贴到文本处理器还是网络浏览器中）可以按原样粘贴到 HTTP POST 变量中吗？
回答by Chris Chalmers
I have been working on a similar problem: how to access the rich text formatting tags when pasting into the browser from a desktop application. I have found the following articles and have a solution that may solve your problem, though at the time of this writing it hasn't solved my own.
我一直在研究一个类似的问题：从桌面应用程序粘贴到浏览器时如何访问富文本格式标签。我找到了以下文章，并有一个解决方案可以解决您的问题，尽管在撰写本文时它还没有解决我自己的问题。
1) https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/
1) https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/
2) JavaScript get clipboard data on paste event (Cross browser)
2) JavaScript 在粘贴事件上获取剪贴板数据（跨浏览器）
If all you are looking for is the formatted html (a result of the browser having parsed the rich text for you), the answer is to access the clipboardDataobject and pass it the 'html' parameter instead of the 'text' parameter. see example below (just paste the following into a file called index.html and run it locally):
如果您要查找的只是格式化的 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>
The above example splits out two versions of clipboardData.getData(), one for IE and one for every other browser. The rough process is: first catch the paste event, then preventdefault, then get the clipboard data as html, then place it into the div. The content of this example is entirely stolen from the two links above, but simplified to exclude the extra things I didn't need (ie: hidden inputs to manage the browser's focus and suport for 'copy' and 'cut' events). Full credit should go to the authors of those articles.
上面的例子拆分了两个版本的 clipboardData.getData()，一个用于 IE，一个用于其他浏览器。粗略的过程是：先捕捉paste事件，然后preventdefault，再获取html的剪贴板数据，然后放入div中。此示例的内容完全从上面的两个链接中窃取，但经过简化以排除我不需要的额外内容（即：隐藏输入以管理浏览器的焦点并支持“复制”和“剪切”事件）。完全归功于这些文章的作者。
In my experience (using mac and chrome) pasting formatted text (even with obscure formats like strikethrough and indent) into the #target div will keep the original formatting fairly well. Good Luck!
根据我的经验（使用 mac 和 chrome），将格式化文本（即使是删除线和缩进等晦涩的格式）粘贴到 #target div 中可以很好地保持原始格式。祝你好运！
Now, if anyone can tel me how to get the actualrich text formatting tagsfrom the clipboardData, please feel free to answer [this question][1]. Thanks!
现在，如果有人可以告诉我如何从剪贴板数据中获取实际的富文本格式标签，请随时回答 [这个问题][1]。谢谢！
[1]: https://stackoverflow.com/questions/30904507/javascript-get-the-rich-text-formatting-tags-from-the-clipboarddata
回答by doc_id
The assumption that clipboard holds "HTML markup" is not correct. When you copy from a browser (or a window that utilizes Multiple Clipboard Formats) the window provides data in as many formats as possible. This includes Rich Text Format (RTF) and plain text. When you paste text, the desitination picks what it likes or what it can render. So a plain text box will pick the plain text, and your word-processor will prefer the rich text one, and defaults to the plain text copy.
剪贴板保存“HTML 标记”的假设是不正确的。当您从浏览器（或使用多种剪贴板格式的窗口）复制时，该窗口会以尽可能多的格式提供数据。这包括富文本格式 (RTF) 和纯文本。粘贴文本时，目标会选择它喜欢的内容或可以呈现的内容。因此，纯文本框将选择纯文本，而您的文字处理器将更喜欢富文本，并且默认为纯文本副本。
EDIT: Somebrowsers -including Chrome > v.37 at least- may add source HTML as you copy content to clipboard. This is not a web standard thus unsafe.
编辑： 某些浏览器（至少包括 Chrome > v.37）可能会在您将内容复制到剪贴板时添加源 HTML。这不是网络标准，因此不安全。
回答by user2373071
Google Office does support the RichText Format. When the text is copied from IE, IE copies to the clipboard in the plain text, rich text, and the html text. So copying from IE to Google office will show the rich formatted text. FireFox, on the other hand, only copies the text in the plain text and the html text format. So any target that does not accept the HTML formatted text will show the text in the plain text.
Google Office 确实支持 RichText 格式。当从 IE 复制文本时，IE 以纯文本、富文本和 html 文本复制到剪贴板。所以从 IE 复制到 Google office 会显示富格式的文本。另一方面，FireFox 只复制纯文本和 html 文本格式的文本。因此，任何不接受 HTML 格式文本的目标都会以纯文本形式显示文本。
