如何允许将 HTML 表格复制粘贴到 HTML textarea 标签中？

Question

TinyMCE、CKEditor 和 Froala 允许您将 HTML tables（例如从电子邮件或维基百科）直接复制粘贴到 HTML textarea 和HTML table 结构和标签被保留。

再举一个例子，我的基于 Web 的电子邮件客户端也可以执行此操作。我可以将收到的电子邮件中的 HTML table 复制到我要发送的电子邮件中，table 结构将被保留。

我知道这些编辑器不仅仅是 HTML 文本区域，而是富文本编辑器。我的问题：哪些浏览器功能允许进行富文本编辑？他们是怎么做到的？

据我所知，每次我将一些 HTML 复制粘贴到 textarea 中时，浏览器会删除所有 HTML 标签。

Answer 1

答案是 HTML 非常灵活，您不局限于用于用户交互的输入元素的默认行为。具体如何处理非明文粘贴，答案并不简单。

幸运的是，有一些开源富文本编辑器。例如，在 ckeditor 中，它由 clipboard pipeline 处理，它接受粘贴事件并在编辑器中应用正确的样式。

Answer 2

这些编辑器通常会有一个 user-visible <div> 元素作为呈现 table 的元素和一个隐藏的 <textarea> 元素，其中包含将要显示的实际标记提交表单时发送到服务器。

Answer 3

这是一个最简单的答案。感谢 Andrew Gillis 指导我找到具有类似内容的 CKEditor 源代码。

<html>
    <head>
    </head>
    <body>
        <textarea class="rich" cols="40" rows="8"></textarea>
    </body>

    <script>
        const target = document.querySelector('textarea.rich');
        target.addEventListener('paste', (event) => {
            const clipboard_data = (event.clipboardData || window.clipboardData);
            const text_paste_content = clipboard_data.getData('text/plain');
            const html_paste_content = clipboard_data.getData('text/html');

            // This what we see by default
            console.log(text_paste_content)

            // This is the raw HTML that can be used to make "rich" content
            console.log(html_paste_content)
        });
    </script>
</html>

当您粘贴到 textarea 时，您将可以通过 html_paste_content 变量访问原始 HTML。

如何允许将 HTML 表格复制粘贴到 HTML textarea 标签中？

How do I allow copy-pasting of HTML tables into an HTML textarea tag?

javascript

html

forms

html-email

rich-text-editor