navigator.clipboard – Zwischenablage lesen und schreiben

Text in die Zwischenablage kopieren

<div class="someText" contenteditable="true">Holla die Waldfee!</div>
<button id="copyBtn">Ins Clipboard kopieren</button>

const copyBtn = document.getElementById('copyBtn');
copyBtn.addEventListener('click', () => {
	navigator.clipboard.writeText(
		document.querySelector(".someText").textContent)
    .then(() => alert("Text wurde kopiert!"))
    .catch(err => alert("Fehler: " + err));
});

Text, HTML, Bilder, Dateien in die Zwischenablage kopieren

navigator.clipboard.write() kopiert sowohl Text als auch HTML in die Zwischenablage.

HTML aus einem contenteditable-Element kann nicht einfach mit navigator.clipboard.writeText() kopieren werden, da dabei nur reiner Text übernommen wird. Um das HTML inklusive Formatierung zu kopieren, muss navigator.clipboard.write() mit einem ClipboardItem und dem MIME-Type "text/html" verwendet werden.

document.getElementById('copy').addEventListener('click', async () => {
	const editable = document.getElementById('editable');
	const html = editable.innerHTML;
	const blob = new Blob([html], { type: 'text/html' });
	const item = new ClipboardItem({ 'text/html': blob });

	try {
		await navigator.clipboard.write([item]);
		const copied = await blob.text();
		blob.text().then(rawHtml => {
			document.querySelector("#result pre").textContent = rawHtml;
		});
		document.querySelector("#htmlcopied").innerHTML = "text/html kopiert"
	} catch (err) {
		console.error('Fehler beim Kopieren:', err);
	}
});

Um den Inhalt als Quelltext sichtbar zu machen, verwendet das Skript hier rawHtml. Die Alternative wäre, wie bei der Ausgabe von Code vorzugehen und die Sonderzeichen > und < zu escapen.

Werden die kopierten Daten der Zwischenablage in einen Code-Editor eingefügt, erscheint nur der blanke Text ohne jegliche HTML-Tags. Wird die Zwischenablage in ein Textbearbeitungsprogramm wie Word oder Pages eingefügt, werden die Formatierungen übernommen.

[Log] item – ClipboardItem {types: ["text/html"], presentationStyle: "unspecified", getType: function}

Am Rande: Ganz früher gab es auch noch execCommand – das ist aber heute deprecated, veraltet.

Einen Bereich – range – ins Clipboard kopieren

document.createRange() ist ein zentraler Baustein im DOM-API für das Arbeiten mit Textauswahl und DOM-Bereichen. und erzeugt ein Range-Objekt zwischen zwei Positionen im Dokument – ähnlich wie eine markierte Auswahl.

const range = document.createRange();

• einen Text programmatisch markieren
• Elemente markieren und verschieben
• Teile des DOM extrahieren

"window.getSelection()

Einen Text aus mehreren HTML-Blöcken sichtbar markieren, z.B. und den Inhalt über das Clipboard zu kopieren.

const btn = document.getElementById("mark");
btn.addEventListener("click", () => {
	const node = document.getElementById("mytext");
  
	const range = document.createRange();
	range.selectNodeContents(node);
  
	const selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range);
});