[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, ' <b>World</b>');
// Editor is now '<p>Hello <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
}
}
});
```
- 前言
- 快速开始(quick_start)
- 下载(download)
- 配置(configuration)
- 格式(formats)
- API
- 内容(contents)
- 格式化(formatting)
- 选区(selection)
- 编辑器(editor)
- 事件(events)
- 模型(model)
- 扩展(extension)
- 增量(Delta)
- 模块(modules)
- 工具栏(toolbar)
- 键盘(keyboard)
- 历史记录(history)
- 粘贴板(clipboard)
- 语法高亮(syntax)
- 主题(themes)
- 更多教程
- 为什么选择Quill?
- 如何定制Quill?
- 设计Delta格式(未翻译)
- 构建一个自定义模块
- 将Quill加入你的编译管线(未翻译)
- Cloning Medium with Parchment
- 和其它富文本编辑器的对比(未翻译)
- Designing the Delta Format
- 扩展模块
- vue-quill-editor
- quill-image-extend-module
- quill-image-resize-module
- quill-image-drop-module
- quill-better-table
- quilljs-table
- 更多模块