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

时间:2019-11-03 15:04:15

标签: javascript wordpress tinymce editor

我注意到,当我们将其他地方的内容复制并粘贴到WordPress编辑器中时,它会保留其原始形式。粘贴的数据不仅是一些文本,还包括HTML和CSS。 WordPress如何做到这一点?我可以举一个代码示例或引用它吗?

1 个答案:

答案 0 :(得分:3)

我假设(我没看过)他们响应paste event并使用getData method对象的clipboardData属性的ClipboardEvent,要求格式化的文本(可能为format参数传递了"text/html")。然后,他们将生成的HTML包含在编辑器中。

例如:如果将以上段落的文本复制到剪贴板,则运行此代码段并单击代码段主体中的任意位置,然后按系统上的粘贴键盘快捷键(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/plain"一无所获,他们可能会退回到"text/html"

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>