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}