initial commit

5 files changed, 385 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/clipboard/index.html b/files/zh-cn/web/api/clipboard/index.html
new file mode 100644
index 0000000000..834376f01e
--- /dev/null
+++ b/files/zh-cn/web/api/clipboard/index.html
@@ -0,0 +1,89 @@
+---
+title: Clipboard
+slug: Web/API/Clipboard
+tags:
+  - API
+  - Clipboard
+  - 剪切
+  - 剪切板
+  - 剪贴板
+  - 参考
+  - 复制
+  - 接口
+  - 粘贴
+  - 编辑
+translation_of: Web/API/Clipboard
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<p><span class="seoSummary"><strong><code>Clipboard</code></strong> 接口实现了 <a href="/zh-CN/docs/Web/API/Clipboard_API">Clipboard API</a>，如果用户授予了相应的权限，就能提供系统剪贴板的读写访问。</span>在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。</p>
+
+<p>系统剪贴板暴露于全局属性 {{domxref("Navigator.clipboard")}} 之中。</p>
+
+<p>如果用户没有适时使用 <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> 授予相应权限和<code>"clipboard-read"</code> 或 <code>"clipboard-write"</code> 权限，调用 <code>Clipboard</code> 对象的方法不会成功。</p>
+
+<div class="note">
+<p><strong>注意：</strong>实际上，现在浏览器对于访问剪贴板权限的索取各有不同，在章节 {{anch("剪贴板可用性")}} 查看更多细节。</p>
+</div>
+
+<p>所有剪贴板 API 方法都是异步的；它们返回一个 {{jsxref("Promise")}} 对象，在剪贴板访问完成后被执行。如果剪贴板访问被拒绝，promise 也会被拒绝。</p>
+
+<div class="blockIndicator note">
+<p><strong>剪贴板 </strong>是用于短期数据储存或转移的数据缓存区，数据转移可以发生在文档和应用程序之间。剪贴板常常实现为一个匿名的、临时的 <a href="https://en.wikipedia.org/wiki/Data_buffer" title="Data buffer">数据缓存</a>，有时也叫做粘贴缓存，可由绝大部分位于已定义编程接口的环境中的程序访问。</p>
+
+<p>一个典型的应用程序常通过将 <a href="https://en.wikipedia.org/wiki/User_input" title="User input">用户输入</a> 如 <a href="https://en.wikipedia.org/wiki/Keybinding" title="Keybinding">组合键</a>, <a href="https://en.wikipedia.org/wiki/Menu_(computing)" title="Menu (computing)">菜单选择</a> 等映射到这些接口来访问剪贴板。</p>
+</div>
+
+<h2 id="方法">方法</h2>
+
+<p><em><code>Clipboard</code> 继承自 {{domxref("EventTarget")}} 接口，因此拥有它的方法。</em></p>
+
+<dl>
+ <dt>{{domxref("Clipboard.read()","read()")}}</dt>
+ <dd>从剪贴板读取数据（比如图片），返回一个 {{jsxref("Promise")}} 对象。When the data has been retrieved, the promise is resolved with a {{domxref("DataTransfer")}} object that provides the data。</dd>
+ <dt>{{domxref("Clipboard.readText()","readText()")}}</dt>
+ <dd>从操作系统读取文本；returns a <code>Promise</code> which is resolved with a {{domxref("DOMString")}} containing the clipboard's text once it's available。</dd>
+ <dt>{{domxref("Clipboard.write()","write()")}}</dt>
+ <dd>写入任意数据至操作系统剪贴板。This asynchronous operation signals that it's finished by resolving the returned <code>Promise</code>。</dd>
+ <dt>{{domxref("Clipboard.writeText()","writeText()")}}</dt>
+ <dd>写入文本至操作系统剪贴板。returning a <code>Promise</code> which is resolved once the text is fully copied into the clipboard。</dd>
+</dl>
+
+<h2 id="剪贴板可用性">剪贴板可用性</h2>
+
+<p>异步剪贴板 API 是一个相对较新的 API，浏览器仍在逐渐实现它。由于潜在的安全问题和技术复杂性，大多数浏览器正在逐步集成这个 API。</p>
+
+<p>例如，Firefox 不支持 <code>"clipboard-read"</code> 和 <code>"clipboard-write"</code> 权限，所以使用其他方式访问或改变剪贴板中的内容会受限。</p>
+
+<p>对于浏览器扩展来说，你可以要求 clipboardRead 和 clipboardWrite 权限以使用 clipboard.readText() 和 clipboard.writeText()。但基于 HTTP 的网站中包含的脚本则不能获得剪贴板对象。参考 <a href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/">extensions in Firefox 63</a>。</p>
+
+<p>除此之外, {{domxref("Clipboard.read", "read()")}} 以及{{domxref("Clipboard.write", "write()")}} 是默认禁用且需要修改偏好设置来启用的。在使用之前请先确认浏览器兼容性表格。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#clipboard-interface','Clipboard')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Clipboard")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{domxref("Document.execCommand()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/clipboard/read/index.html b/files/zh-cn/web/api/clipboard/read/index.html
new file mode 100644
index 0000000000..7b0ffa7bda
--- /dev/null
+++ b/files/zh-cn/web/api/clipboard/read/index.html
@@ -0,0 +1,84 @@
+---
+title: Clipboard.read()
+slug: Web/API/Clipboard/read
+tags:
+  - API
+  - Clip
+  - Clipboard
+  - Clipboard API
+  - read
+translation_of: Web/API/Clipboard/read
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<p><span class="seoSummary">The <strong><code>read()</code></strong> method of the {{domxref("Clipboard")}} interface requests a copy of the clipboard's contents, delivering the data to the returned {{jsxref("Promise")}} when the promise is resolved. Unlike {{domxref("Clipboard.readText", "readText()")}}, the <code>read()</code> method can return arbitrary data, such as images.</span></p>
+
+<p>To read from the clipboard, you must first have the <code>"clipboard-read"</code> permission.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The asynchronous Clipboard and <a href="/en-US/docs/Web/API/Permissions_API">Permissions APIs</a> are still in the process of being integrated into most browsers, so they often deviate from the official rules for permissions and the like. Be sure to review the {{anch("Browser compatibility", "compatibility table")}} before using these methods.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.read();</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{jsxref("Promise")}} that resolves with a {{domxref("DataTransfer")}} object containing the clipboard's contents. The promise is rejected if permission to access the clipboard is not granted.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>After using {{domxref("Permissions.query", "navigator.permissions.query()")}} to find out if we have (or if the user will be prompted to allow) <code>"clipboard-read"</code> access, this example fetches the data currently on the clipboard. If it's not plain text, an error message is presented. Otherwise, an element referred to using the variable <code>textElem</code> has its contents replaced with the clipboard's contents.</p>
+
+<pre class="brush: js">// First, ask the Permissions API if we have some kind of access to
+// the "clipboard-read" feature.
+
+navigator.permissions.query({name: "clipboard-read"}).then(result =&gt; {
+  // If permission to read the clipboard is granted or if the user will
+  // be prompted to allow it, we proceed.
+
+  if (result.state == "granted" || result.state == "prompt") {
+    navigator.clipboard.read().then(data =&gt; {
+      for (let i=0; i&lt;data.items.length; i++) {
+        if (data.items[i].type != "text/plain") {
+          alert("Clipboard contains non-text data. Unable to access it.");
+        } else {
+          textElem.innerText = data.items[i].getAs("text/plain");
+        }
+      }
+    });
+  }
+});
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> At this time, while Firefox does implement <code>read()</code>, it does not recognize the <code>"clipboard-read"</code> permission, so attempting to use the <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> to manage access to the API will not work.</p>
+</div>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#h-clipboard-read','read()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Clipboard.read")}}</p>
diff --git a/files/zh-cn/web/api/clipboard/readtext/index.html b/files/zh-cn/web/api/clipboard/readtext/index.html
new file mode 100644
index 0000000000..44f5d76e5e
--- /dev/null
+++ b/files/zh-cn/web/api/clipboard/readtext/index.html
@@ -0,0 +1,68 @@
+---
+title: Clipboard.readText()
+slug: Web/API/Clipboard/readText
+tags:
+  - API
+  - Async Clipboard API
+  - Clip
+  - Clipboard
+  - readText
+  - 复制
+  - 粘贴
+translation_of: Web/API/Clipboard/readText
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<div><span class="seoSummary"><strong>{{domxref("Clipboard")}}</strong> </span>接口的<span class="seoSummary"><strong><code>readText()</code></strong></span>方法解析系统剪贴板的文本内容返回一个<span class="seoSummary">{{jsxref("Promise")}} </span>。</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.readText()</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>None.</p>
+
+<h3 id="返回值"><span>返回值</span></h3>
+
+<p>A {{jsxref("Promise")}} that resolves with a {{domxref("DOMString")}} containing the textual contents of the clipboard. Returns an empty string if the clipboard is empty, does not contain text, or does not include a textual representation among the {{domxref("DataTransfer")}} objects representing the clipboard's contents.</p>
+
+<p>要从剪贴板中读取非文本内容，请改用{{domxref("Clipboard.read", "read()")}}方法。您可以使用 {{domxref("Clipboard.writeText", "writeText()")}}将文本写入剪贴板</p>
+
+<h2 id="例子">例子</h2>
+
+<p>此示例检索剪贴板的文本内容，并将返回的文本插入元素的内容中。</p>
+
+<pre class="brush: js">navigator.clipboard.readText().then(
+  clipText =&gt; document.getElementById("outbox").innerText = clipText);</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#h-clipboard-readtext','readText()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Clipboard.readText")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li>
+ <li>{{domxref("Clipboard.writeText()")}}</li>
+ <li>{{domxref("Clipboard.write()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/clipboard/write/index.html b/files/zh-cn/web/api/clipboard/write/index.html
new file mode 100644
index 0000000000..a7f69da118
--- /dev/null
+++ b/files/zh-cn/web/api/clipboard/write/index.html
@@ -0,0 +1,76 @@
+---
+title: Clipboard.write()
+slug: Web/API/Clipboard/write
+translation_of: Web/API/Clipboard/write
+---
+<p>{{APIRef("Clipboard API")}}</p>
+
+<div> </div>
+
+<p> </p>
+
+<div> </div>
+
+<p><span class="seoSummary">{{domxref("Clipboard")}} 的方法 <strong><code>write()</code></strong> 写入图片等任意的数据到剪贴板。</span> 这个方法可以用于实现剪切和复制的功能。</p>
+
+<p>但是你要提前获取 "<a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>" 的 <code>"clipboard-write"</code> 权限才能将数据写入到剪贴板。</p>
+
+<div class="note">
+<p><strong>注意:</strong> 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查 {{anch("Browser compatibility", "compatibility table")}} 和 {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} 以获得更多的兼容性信息。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.write(<em>dataTransfer</em>)</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>dataTransfer</code></dt>
+ <dd>{{domxref("DataTransfer")}} 对象包含了要写入剪贴板的数据。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>当数据被写入到剪贴板的时候，{{jsxref("Promise")}} resolve 回调被执行。如果剪贴板不能完成剪贴操作，{{jsxref("Promise")}}  reject 回调被执行。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>这个例子展示了如何将当前剪贴板的内容替换为给定的内容。</p>
+
+<pre class="brush: js">function setClipboard(text) {
+  let data = new DataTransfer();
+
+  data.items.add("text/plain", text);
+  navigator.clipboard.write(data).then(function() {
+    /* success */
+  }, function() {
+    /* failure */
+  });
+}
+</pre>
+
+<p>代码创建了一个 {{domxref("DataTransfer")}} 对象，要替换的内容存储在这里。执行 {{domxref("DataTransferItemList.add()")}} 将数据写入进去，然后执行 <code>write()</code> 方法，指定执行成功或错误的结果。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#h-clipboard-write-data','write()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Clipboard.write")}}</p>
diff --git a/files/zh-cn/web/api/clipboard/writetext/index.html b/files/zh-cn/web/api/clipboard/writetext/index.html
new file mode 100644
index 0000000000..e60e7204fe
--- /dev/null
+++ b/files/zh-cn/web/api/clipboard/writetext/index.html
@@ -0,0 +1,68 @@
+---
+title: Clipboard.writeText()
+slug: Web/API/Clipboard/writeText
+tags:
+  - API
+  - Clip
+  - Clipboard
+  - Clipboard API
+  - writeText
+translation_of: Web/API/Clipboard/writeText
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<p>{{domxref("Clipboard")}} 接口的 <strong><code>writeText()</code></strong> 方法可以写入特定字符串到操作系统的剪切板。</p>
+
+<div class="note">
+<p><strong>Note:</strong> 规范要求在写入剪贴板之前使用 <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的API。有关详细信息，请查看{{anch("Browser compatibility", "compatibility table")}} and {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}}。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.writeText(<em>newClipText</em>)</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>newClipText</code></dt>
+ <dd>The {{domxref("DOMString")}} to be written to the clipboard.</dd>
+ <dt>
+ <h3 id="返回值">返回值</h3>
+ </dt>
+</dl>
+
+<p>一个{{jsxref("Promise")}} ，一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板（reject）</p>
+
+<h2 id="例子">例子</h2>
+
+<p>此示例将剪贴板的内容设置为字符串“&lt;empty clipboard&gt;”。</p>
+
+<pre class="brush: js">navigator.clipboard.writeText("&lt;empty clipboard&gt;").then(function() {
+  /* clipboard successfully set */
+}, function() {
+  /* clipboard write failed */
+});
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#h-clipboard-writetext-data','writeText()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Clipboard.writeText")}}</p>