Изменить содержимое буфера обмена богатых отформатированных HTML -таблицами, сохраняя при этом форматирование и структур ⇐ Html

[Anonymous]

Я хотел бы иметь возможность изменить данные буфера обмена конкретными элементами, сохраняя исходную структуру, если бы данные об буфере обмена были бы не изменены. Maintaining this formatting while modifying specific elements of the clipboard data is what I'm looking for.



A header
Another header




{replace} < /td>
row < /td>
< /tr>

second < /td>
row < /td>
< /tr>

row < /td>
< /tr>

< /td>
< /tr> < /td>
/>
Однако, похоже, нет никакого способа получить данные буфера обмена, которые будут скопированы, если вы угнаете событие копирования с Document.AddeventListener ('Copy', CopyHandler) и предотвратите событие копирования по умолчанию. Если я не неправильный, кажется, что данные о выборе и запись в буфер обмена должны быть сделаны вручную. Получение данных выбора можно обрабатывать с использованием window.getSelection (). GetRangeat (n) , и извлечение из выбранных HTML -элементов, которые содержат неполные фрагменты, такие как или . Я бы хотел, чтобы это работало для любого из неполных тегов, таких как , или просто автономные выбранные теги < /p>
Вот фрагмент кода, показывающий, как настраивается обработчик копирования: < /p>
let copyEnabled = true;
const handleCopy = (e: ClipboardEvent) => {
if (!copyEnabled) return;
e.preventDefault();
const selection = document.getSelection();
if (selection) {
const range = selection.getRangeAt(0);
const fragment = range.cloneContents();

// Replacement code for selected fragment here
//...

const div = document.createElement("div");
div.appendChild(fragment);
e.clipboardData?.setData("text/html", div.innerHTML);
}
}
document.addEventListener("copy", handleCopy);
< /code>
с включенной копией установлен на false, который использует обработчик копирования по умолчанию, копируя результаты первой строки в следующем html: < /p>






{REPLACE}
30





< /code>
с установленной копией на истину, и обработчик включен, скопирован следующий HTML: < /p>



{REPLACE}
30



< /code>
Этот кодовый и ящик демонстрирует вышеуказанное поведение. При выборе одной строки, а затем копируя ее, и вставая обратно в текстовое поле, он будет содержать необходимые родительские элементы, но когда обработчик копирования включен, эти элементы отсутствуют.
https://codesandbox.io/p/devbox/searcha ... cfzt8yjmm2

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-maintain