Question

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

在浏览器窗口之间复制粘贴（转换为普通<textarea>或其他元素）时，即使剪贴板中存在标记，也会忽略标记。

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

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

换句话说，

必须在剪贴板中某处的标记（因为剪贴板还不知道用户是否粘贴到文本处理器或网络浏览器中）被粘贴为 - 进入HTTP POST变量？

Answer 1

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

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

Answer 2

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

编辑：一些浏览器 - 包括Chrome＆gt; v.37至少 - 可以在将内容复制到剪贴板时添加源HTML。这不是网络标准，因此不安全。

Answer 3

Google Office支持RichText格式。从IE复制文本时，IE将以纯文本，富文本和html文本复制到剪贴板。因此，从IE复制到Google办公室将显示丰富的格式化文本。另一方面，FireFox仅复制纯文本和html文本格式的文本。因此，任何不接受HTML格式文本的目标都将以纯文本显示文本。

Answer 4

我个人正在寻找一种解决方法，可以将rtf从剪贴板中提取出来并在此jsbin中进行管理：

console.log(event.clipboardData.types);
let paste = (event.clipboardData || window.clipboardData).getData('text/rtf');

用于在插入文本区域时分配内容而不会转义（请不要忘记更新querySelector + html）：

target.value=paste

还有其他类型，如文件或html可用。我通过从Excel复制进行测试。

Answer 5

感谢 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>

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

5 个答案: