/
index.html
138 lines (115 loc) · 4.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<title>Clipboard.write() Examples</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script>
async function copyPlainText() {
const plainText = document.getElementById("plainText");
const clipboardItem = new ClipboardItem({
"text/plain": new Blob(
[plainText.innerText],
{ type: "text/plain" }
),
});
navigator.clipboard.write([clipboardItem]);
}
async function copyRichText() {
const richText = document.getElementById("richText");
const clipboardItem = new ClipboardItem({
"text/plain": new Blob(
[richText.outerHTML],
{ type: "text/plain" }
),
"text/html": new Blob(
[richText.outerHTML],
{ type: "text/html" }
),
});
navigator.clipboard.write([clipboardItem]);
}
async function copyRichTextWithFallback() {
const richTextWithFallback = document.getElementById("copyRichTextWithFallback");
const clipboardItem = new ClipboardItem({
"text/plain": new Blob(
[richTextWithFallback.innerText],
{ type: "text/plain" }
),
"text/html": new Blob(
[richTextWithFallback.outerHTML],
{ type: "text/html" }
),
});
navigator.clipboard.write([clipboardItem]);
}
async function copyOnlyAsRichText() {
const copyOnlyAsRichText = document.getElementById("copyOnlyAsRichText");
const clipboardItem = new ClipboardItem({
"text/html": new Blob(
[copyOnlyAsRichText.outerHTML],
{ type: "text/html" }
),
});
navigator.clipboard.write([clipboardItem]);
}
</script>
</head>
<body>
<h1>Examples using <code>Web API: Clipboard.write()</code></h1>
<p>It seemed a bit difficult to find just pure <code>text/html</code> examples for the Clipboard API. Turns out it's
probably because you also need a <code>text/plain</code> backup version to also be on the clipboard too.</p>
<p>If this isn't the case, and I can just do a single <code>text/html</code> please send an issue or PR.</p>
<p>The new Clipboard API on Chromium is coming along and I spent an afternoon on the <code>text/html</code> nuances.
</p>
<p>These examples don't use the newer async version of the API.</p>
<a href="https://github.com/nikouu/Web-API-Clipboard.write-Examples". target="_blank">Link to the Repo</a>
<ul>
<li><a href="https://www.w3.org/TR/clipboard-apis/#dom-clipboard-write" target="_blank">W3 spec</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write" target="_blank">MDN reference</a>
</li>
<li><a href="https://chromestatus.com/feature/5357049665814528" target="_blank">Chrome release status for
text/html support</a></li>
<li><a href="https://blog.chromium.org/2020/09/chrome-86-improved-focus-highlighting.html"
target="_blank">Chrome 86 release notes</a></li>
<li><a href="https://webkit.org/blog/10855/async-clipboard-api/" target="_blank">Webkit documentation</a></li>
</ul>
<div>
<h2>Examples</h2>
<p>After clicking one of the buttons to copy the text to your clipboard, try pasting into both a non-rich and a rich text environment.</p>
<h3>Plain text</h3>
<p>Takes the <code>innerText</code> value of the div below and copies it to the clipboard.</p>
<button onclick="copyPlainText()">Click to copy the text below</button>
<br />
<br />
<div id="plainText">Plain text hello world</div>
<hr />
<h3>Plain(raw) and HTML text</h3>
<p>Creates two clipboard entries, one for <code>text/plain</code> and <code>text/html</code> which it seems the
operating system decides which to use based on where the data is pasted.</p>
<p>For the sake of an example, this copies the <code>innerText</code> value of the below div and uses it for
both <code>text/plain</code> and <code>text/html</code> clipboard types.</p>
<button onclick="copyRichText()">Click to copy the rich text below</button>
<br />
<br />
<div id="richText">Plain text and <i>HTML</i> <b>hello world</b></div>
<hr />
<h3>Plain(fallback) and HTML text</h3>
<p>Creates two clipboard entries, one for <code>text/plain</code> and <code>text/html</code> where the plain
example is the <code>innerText</code> and the html version is the full HTML markup.</p>
<button onclick="copyRichTextWithFallback()">Click to copy the rich text below with plaintext fallback</button>
<br />
<br />
<div id="copyRichTextWithFallback">Plain text and <i>HTML</i> <b>hello world</b></div>
<hr />
<h3>HTML only text (fails)</h3>
<p>This seems to fail as there is no <code>text/plain</code> backup. Nothing is copied to the clipboard.</p>
<button onclick="copyOnlyAsRichText()">Click to copy the rich text below with no plaintext fallback</button>
<br />
<br />
<div id="copyOnlyAsRichText">Plain text and <i>HTML</i> <b>hello world</b></div>
</div>
</body>