1 | <!doctype html>
|
2 | <html>
|
3 | <head>
|
4 | <meta charset="utf-8" />
|
5 | <title>clipboard-polyfill</title>
|
6 | <link rel="stylesheet" href="index.css">
|
7 | <script src="build/clipboard-polyfill.promise.js"></script>
|
8 | <script>
|
9 |
|
10 |
|
11 |
|
12 | var infoOrLog = function() {
|
13 | (console.info || console.log).apply(console, arguments);
|
14 | };
|
15 | clipboard.setDebugLog(infoOrLog);
|
16 | </script>
|
17 | <style>
|
18 | .editable {
|
19 | min-width: 20px;
|
20 | min-height: 1em;
|
21 | border: 1px solid #AAA;
|
22 | }
|
23 | </style>
|
24 | </head>
|
25 | <body>
|
26 |
|
27 | <div class="header">
|
28 | <a href="https://github.com/lgarron/clipboard-polyfill">clipboard-polyfill</a>
|
29 | </div>
|
30 | <div class="ribbon"></div>
|
31 | <div class="content">
|
32 |
|
33 | <h2>Plain Text</h2>
|
34 |
|
35 | <button id="plain-copy">Copy text (plain)</button>
|
36 | <span id="plain-copy-result"></span>
|
37 | <script>
|
38 | document.getElementById("plain-copy").addEventListener("click", function() {
|
39 | var resultField = document.getElementById("plain-copy-result");
|
40 |
|
41 | clipboard.writeText("This text is plain.").then(function(){
|
42 | resultField.textContent = "success";
|
43 | }, function(err){
|
44 | resultField.textContent = err;
|
45 | });
|
46 | });
|
47 | </script>
|
48 |
|
49 | <h2>Markup</h2>
|
50 |
|
51 | <button id="markup-copy">Copy text (markup)</button>
|
52 | <span id="markup-copy-result"></span>
|
53 | <script>
|
54 | document.getElementById("markup-copy").addEventListener("click", function() {
|
55 | var resultField = document.getElementById("markup-copy-result");
|
56 |
|
57 | var dt = new clipboard.DT();
|
58 | dt.setData("text/html", "<i>Markup</i> <b>text</b>. Paste me into a rich text editor.");
|
59 | dt.setData("text/plain", "Fallback markup text. Paste me into a rich text editor.");
|
60 | clipboard.write(dt).then(function(){
|
61 | resultField.textContent = "success";
|
62 | }, function(err){
|
63 | resultField.textContent = err;
|
64 | });
|
65 | });
|
66 | </script>
|
67 |
|
68 | <h2>DOM node</h2>
|
69 |
|
70 | <button id="markup-dom-copy">Copy markup (DOM node → markup)</button>
|
71 | <span id="markup-dom-copy-result"></span>
|
72 | <br>
|
73 | <span id="markup-dom-copy-source" style="font-family: Helvetica;"><i><span style="font-size: 150%">T</span>his</i> <span style="background: orange; padding: 0px 2px">will be</span> <b>copied</b>.</span>
|
74 | <script>
|
75 | document.getElementById("markup-dom-copy").addEventListener("click", function() {
|
76 | var resultField = document.getElementById("markup-dom-copy-result");
|
77 |
|
78 | var dt = new clipboard.DT();
|
79 | dt.setData("text/html", new XMLSerializer().serializeToString(document.getElementById("markup-dom-copy-source")));
|
80 | dt.setData("text/plain", document.getElementById("markup-dom-copy-source").innerText);
|
81 | clipboard.write(dt).then(function(){
|
82 | resultField.textContent = "success";
|
83 | }, function(err){
|
84 | resultField.textContent = err;
|
85 | });
|
86 | });
|
87 | </script>
|
88 |
|
89 | <h2>Paste Text</h2>
|
90 |
|
91 | <button id="paste">Paste Text</button>
|
92 | <span id="paste-result"></span>
|
93 | <script>
|
94 | document.getElementById("paste").addEventListener("click", function() {
|
95 | var resultField = document.getElementById("paste-result");
|
96 |
|
97 | clipboard.readText().then(function(result) {
|
98 | resultField.textContent = result;
|
99 | }, function(err) {
|
100 | resultField.textContent = err;
|
101 | });
|
102 | });
|
103 | </script>
|
104 |
|
105 | <br>
|
106 | <br>
|
107 | <h2>Paste Area</h2>
|
108 | <div contenteditable="true" class="editable"></div>
|
109 | </div>
|
110 |
|
111 | </body>
|
112 | </html>
|