剪贴板模块

剪贴板处理 Quill 和外部应用之间的复制、剪切和粘贴操作。存在一组默认值，用于对粘贴的内容提供合理的解释，并能够通过匹配器进行进一步的自定义。

¥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.

剪贴板通过遍历 post-order 中相应的 DOM 树来解释粘贴的 HTML，构建所有子树的 增量 表示。在每个后代节点，匹配器函数都会使用迄今为止的 DOM 节点和 Delta 解释进行调用，从而允许匹配器返回修改后的 Delta 解释。

¥The Clipboard interprets pasted HTML by traversing the corresponding DOM tree in 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.

为了有效地使用匹配器，熟悉并熟练使用 Deltas 是必要的。

¥Familiarity and comfort with Deltas is necessary in order to effectively use matchers.

API

addMatcher

向剪贴板添加自定义匹配器。首先调用使用 nodeType 的匹配器，按照它们的添加顺序，然后调用使用 CSS selector 的匹配器，也按照它们的添加顺序。nodeType 可能是 Node.ELEMENT_NODE 或 Node.TEXT_NODE。

¥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 may be Node.ELEMENT_NODE or Node.TEXT_NODE.

方法

¥Methods

addMatcher(selector: String, (node: Node, delta: Delta) => Delta)
addMatcher(nodeType: Number, (node: Node, delta: Delta) => Delta)

示例

¥Examples

quill.clipboard.addMatcher(Node.TEXT_NODE, (node, delta) => {
  return new Delta().insert(node.data);
});

// Interpret a <b> tag as bold
quill.clipboard.addMatcher('B', (node, delta) => {
  return delta.compose(new Delta().retain(delta.length(), { bold: true }));
});

dang​​erouslyPasteHTML

将 HTML 代码片段表示的内容插入到编辑器中给定索引的位置。该代码片段由 Clipboard matchers 解释，可能无法生成与输入完全相同的 HTML。如果未提供插入索引，则整个编辑器内容将被覆盖。source 可以是 "user"、"api" 或 "silent"。

¥Inserts content represented by HTML snippet into editor at a given index. The snippet is interpreted by Clipboard matchers, which may not produce the exactly input HTML. If no insertion index is provided, the entire editor contents will be overwritten. The source may be "user", "api", or "silent".

HTML 处理不当会导致 跨站点脚本 (XSS) 错误，而未能正确清理 HTML 不仅容易出错，而且是造成 Web 漏洞的主要原因。此方法遵循 React 的示例，其命名也恰如其分，以确保开发者已采取必要的预防措施。

¥Improper handling of HTML can lead to 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.

方法

¥Methods

dangerouslyPasteHTML(html: String, source: String = 'api')
dangerouslyPasteHTML(index: Number, html: String, source: String = 'api')

示例

¥Examples

quill.setText('Hello!');

quill.clipboard.dangerouslyPasteHTML(5, '&nbsp;<b>World</b>');
// Editor is now '<p>Hello&nbsp;<strong>World</strong>!</p>';

配置

¥Configuration

matchers

可以将匹配器数组传递到剪贴板的配置选项中。这些将附加在 Quill 自身的默认匹配器之后。

¥An array of matchers can be passed into Clipboard's configuration options. These will be appended after Quill's own default matchers.

const quill = new Quill('#editor', {
  modules: {
    clipboard: {
      matchers: [
        ['B', customMatcherA],
        [Node.TEXT_NODE, customMatcherB]
      ]
    }
  }
});