🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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 } } }); ```