[TOC] <!-- The Clipboard handles copy, cut and paste between Quill and external applications. A set of defaults exist to provide sane interpretation of pasted content, with the ability for further customization through matchers. --> 粘貼板處理Quill和外部程序直接的復制、剪切和粘貼。默認提供內容粘貼的正常解析，也能通過匹配做進一步的定制。 <!-- The Clipboard interprets pasted HTML by traversing the corresponding DOM tree in [post-order](https://en.wikipedia.org/wiki/Tree_traversal#Post-order), building up a [Delta]() representation of all subtrees. At each descendant node, matcher functions are called with the DOM Node and Delta interpretation so far, allowing the matcher to return a modified Delta interpretation. --> 粘貼板模塊解析通過<a target="_blank" href="https://en.wikipedia.org/wiki/Tree_traversal#Post-order">后序遍歷]</a>對應DOM樹粘貼HTML， 建立所有子節點的[Delta](../增量Delta.md)表達。目前為止，每個子節點，匹配器函數用DOM節點和Delta表達調用，允許匹配器返回一個修改的Delta表達。 <!-- Familiarity and comfort with [Deltas](../增量Delta.md) is necessary in order to effectively use matchers. --> 為了有效的使用匹配，需要熟練駕馭[Deltas](../增量Delta.md)。 ## API ### addMatcher <!-- Adds a custom matcher to the Clipboard. Matchers using `nodeType` are called first, in the order they were added, followed by matchers using a CSS `selector`, also in the order they were added. [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType) may be `Node.ELEMENT_NODE` or `Node.TEXT_NODE`. --> 添加定制的匹配器到粘貼板模塊，匹配器優先使用`nodeType`匹配并加入，接下來使用CSS選擇器`selector`，也是匹配后加入。 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType">`nodeType`</a>可能是`Node.ELEMENT_NODE` 或 `Node.TEXT_NODE` **方法** ```javascript addMatcher(selector: String, (node: Node, delta: Delta) => Delta) addMatcher(nodeType: Number, (node: Node, delta: Delta) => Delta) ``` **示例** ```javascript quill.clipboard.addMatcher(Node.TEXT_NODE, function(node, delta) { return new Delta().insert(node.data); }); // Interpret a <b> tag as bold quill.clipboard.addMatcher('B', function(node, delta) { return delta.compose(new Delta().retain(delta.length(), { bold: true })); }); ``` ### dangerouslyPasteHTML <!-- Inserts content represented by HTML snippet into editor at a given index. The snippet is interpreted by Clipboard [matchers](#addMatcher), which may not produce the exactly input HTML. If no insertion index is provided, the entire editor contents will be overwritten. The [source](/docs/api/#events) may be `"user"`, `"api"`, or `"silent"`. --> 在給定的索引位置插入HTML片段內容。片段通過粘貼板插件[matchers](#addMatcher)解析，可能不與輸入的HTML完全匹配。如果沒有插入索引，整個編輯器的內容將會被覆蓋。[source](鍵盤keyboard.md) 可能為 `"user"`, `"api"`, 或 `"silent"`。 <!-- Improper handling of HTML can lead to [cross site scripting (XSS)](https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)) and failure to sanitize properly is both notoriously error-prone and a leading cause of web vulnerabilities. This method follows React's example and is aptly named to ensure the developer has taken the necessary precautions. --> 處理不當的HTML導致 <a href="https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)">跨站腳本攻擊 (XSS)</a> 和未完全成功審查是很容易出錯及導致Web漏洞的主要原因。這個方法按照React的例子，恰當的命名，以確保開發者采取了必要的預防措施。 **方法** ```javascript dangerouslyPasteHTML(html: String, source: String = 'api') dangerouslyPasteHTML(index: Number, html: String, source: String = 'api') ``` **示例** ```javascript quill.setText('Hello!'); quill.clipboard.dangerouslyPasteHTML(5, '&nbsp;<b>World</b>'); // Editor is now '<p>Hello&nbsp;<strong>World</strong>!</p>'; ``` ## 設置 ### matchers <!-- An array of matchers can be passed into Clipboard's configuration options. These will be appended after Quill's own default matchers. --> 匹配器數組可以傳入粘貼板的設置選項。這些匹配器將附加在Quill自身的默認匹配器后。 ```javascript var quill = new Quill('#editor', { modules: { clipboard: { matchers: [ ['B', customMatcherA], [Node.TEXT_NODE, customMatcherB] ] } } }); ``` ### matchVisual <!-- Quill by default does not have padding or margin for each line, whereas some websites or sources where a paste will come from will. By default Quill will try to match this spacing visually by adding an extra line to compensate for the missing margin/padding. This option disables this behavior. --> 默認情況下，Quill是不會為每一行提供填充(padding)或邊距(margin)的，但是從其他網站或來源粘貼過來的可能會含有。默認情況下，Quill通過添加額外行來匹配這個間距，以彌補缺失的margin/padding。這個選擇項將禁用這個行為。 ```javascript var quill = new Quill('#editor', { modules: { clipboard: { matchVisual: false } } }); ```