如何将丰富文本从剪贴板粘贴到HTML textarea元素？ [英] How to paste rich text from clipboard to HTML textarea element?

问题描述

当从网络浏览器复制到文本处理器时，HTML标记会转换为富文本，而文本处理器会尝试将标记转换为自己的格式。这证明剪贴板能够保存标记。

当在浏览器窗口之间复制粘贴时（在正常的< textarea> code>或其他元素），那么标记将被忽略，即使标记存在于剪贴板中。

也许有一种解决方案可以让浏览器选择

有没有一种方法可以访问< textarea>中的剪贴板的丰富文本。 元素？

换句话说，标记必须位于剪贴板中的某处（因为剪贴板不知道用户是粘贴到文本处理器还是Web浏览器）将原样粘贴到HTTP POST中变量？

解决方案

我一直在研究类似的问题：如何在粘贴时访问富文本格式标签从桌面应用程序进入浏览器。我发现了以下文章并提供了可以解决您的问题的解决方案，尽管在撰写本文时尚未解决我自己的问题。

1） https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

2） JavaScript获取粘贴事件的剪贴板数据（跨浏览器）

如果您正在寻找的是格式化的HTML（浏览器为您分析了富文本的结果），答案是访问剪贴板数据对象并将其传递给'html'参数而不是'text'参数。请参阅下面的示例（只需将以下内容粘贴到名为index.html的文件中并在本地运行即可）：

 < div id = targetcontenteditable =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中会使格式化的文本保持相当好的状态（即使使用了不透明的格式，例如删除线和缩进）。祝好运！

现在，如果有人能告诉我如何从 标签剪贴板数据，请随时回答[此问题] [1]。谢谢！

  [1]：https：//stackoverflow.com/questions/30904507/javascript-get-the-rich- text-formatting-tags-from-the-clipboarddata 
  

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.

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.

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?

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?

解决方案

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/

2) JavaScript get clipboard data on paste event (Cross browser)

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 clipboardData object 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):

<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.

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!

Now, if anyone can tel me how to get the actual rich text formatting tags from the clipboardData, please feel free to answer [this question][1]. Thanks!

[1]: https://stackoverflow.com/questions/30904507/javascript-get-the-rich-text-formatting-tags-from-the-clipboarddata

这篇关于如何将丰富文本从剪贴板粘贴到HTML textarea元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！