Как редактор WordPress сохраняет форматирование текста при копировании и вставке? - PullRequest
Новая
       21

Как редактор WordPress сохраняет форматирование текста при копировании и вставке?

1 голос
/ 03 ноября 2019

Я заметил, что когда мы копируем и вставляем что-то из какого-то другого места в редактор WordPress, он сохраняет свою первоначальную форму. Вставленные данные - это не просто текст, а HTML и CSS. Как WordPress делает это? Можно привести пример кода или ссылку на него?

1 Ответ

3 голосов
/ 03 ноября 2019

Я предполагаю (я не смотрел), что они отвечают на paste событие и используют getData метод clipboardData свойство объекта ClipboardEvent, запрашивающее его для форматированного текста (возможно, передающее "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>
...