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

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”参数而不是“文本”参数。请参阅下面的示例(只需将以下内容粘贴到名为 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 .谢谢!