如何将剪贴板中的富文本粘贴到HTML textarea元素？

Question

当从Web浏览器复制粘贴到文本处理器时,HTML标记将转换为富文本,文本处理器会尝试将标记转换为自己的格式.这证明剪贴板能够保持标记.

在浏览器窗口(正常<textarea>或其他元素)之间进行复制粘贴时,即使剪贴板中存在标记,也会忽略标记.

也许有一种解决方案可以让浏览器从剪贴板中选择富文本格式.

有没有办法在<textarea>元素中访问剪贴板的富文本？

换一种说法,

是否必须在剪贴板中的某处(因为剪贴板还不知道用户是否粘贴到文本处理器或Web浏览器中)的标记是否可以原样粘贴到HTTP POST变量中？

Answer 1

我一直在研究类似的问题:如何从桌面应用程序粘贴到浏览器时访问富文本格式标记.我找到了以下文章并找到了可以解决您问题的解决方案,尽管在撰写本文时它还没有解决我自己的问题.

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

2)JavaScript在粘贴事件上获取剪贴板数据(跨浏览器)

如果您要查找的只是格式化的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

Answer 2

剪贴板持有"HTML标记"的假设不正确.从浏览器(或使用多剪贴板格式的窗口)复制时,窗口以尽可能多的格式提供数据.这包括RTF格式(RTF)和纯文本.粘贴文本时,desitination会选择它喜欢的内容或它可以呈现的内容.因此,纯文本框将选择纯文本,并且您的文字处理器将更喜欢富文本文本,并默认为纯文本副本.

编辑: 某些浏览器 - 包括Chrome> v.37至少 - 可能会在您将内容复制到剪贴板时添加源HTML.这不是网络标准,因此不安全.