WordPress 编辑器在复制和粘贴时如何保留文本格式？答案

【问题标题】：How does WordPress editor preserve formatting of text when copy and pasted?WordPress 编辑器在复制和粘贴时如何保留文本格式？
【发布时间】：2020-02-29 01:28:31
【问题描述】：

我注意到，当我们将某些内容从其他地方复制并粘贴到 WordPress 编辑器时，它会保留其原始形式。粘贴的数据不仅仅是一些文本，还有 HTML 和 CSS。 WordPress是如何做到的？我可以提供代码示例或参考吗？

【问题讨论】：

标签： javascript wordpress tinymce editor

【解决方案1】：

我假设（我没有看过）他们响应 paste event 并使用 clipboardData 对象的 getData method 属性的 getData method ClipboardEvent ，要求它提供格式化文本（可能通过 "text/html"对于格式参数）。然后他们获取生成的 HTML 并将其包含在编辑器中。

例如：如果您将上面段落的文本复制到剪贴板，然后运行此 sn-p 并单击 sn-p 正文中的任意位置，然后按系统上的粘贴键盘快捷键（Ctrl+V 等.)，它应该显示剪贴板中的格式化文本：

document.addEventListener("paste", function(e) {
    document.getElementById("output").innerHTML =
      (e.clipboardData && e.clipboardData.getData("text/html")) || "";
});

<div>Click here to focus the window, then do a paste</div>
<div id="output"></div>

如果他们没有得到"text/html" 的任何东西，他们可能会退回到"text/plain"：

document.addEventListener("paste", function(e) {
    if (e.clipboardData) {
        var output = document.getElementById("output");
        var str = e.clipboardData.getData("text/html");
        if (str) {
            console.log("html");
            output.innerHTML = str;
        } else {
            console.log("plain text");
            str = e.clipboardData.getData("text/plain");
            output.textContent = str;
        }
    }
});

<div>Click here to focus the window, then do a paste</div>
<div id="output"></div>

【讨论】：

谢谢，这真的很有帮助。