quill.js官方文档(九)【Clipboard，Syntax】

梦里梦外; 2021-07-04 21:06 554阅读 0赞

## 粘贴板(clipboard)模块 ##

粘贴板处理`Quill`和外部程序直接的复制、剪切和粘贴。默认提供内容粘贴的正常解析，也能通过匹配做进一步的定制。

粘贴板模块解析通过后序遍历\]对应DOM树粘贴HTML，  
建立所有子节点的Delta表达。目前为止，每个子节点，匹配器函数用DOM节点和`Delta`表达调用，允许匹配器返回一个修改的`Delta`表达。

为了有效的使用匹配，需要熟练驾驭`Deltas`。

### API ###

#### `addMatcher` ####

添加定制的匹配器到粘贴板模块，匹配器优先使用`nodeType`匹配并加入，接下来使用CSS选择器`selector`，也是匹配后加入。  
`nodeType`可能是`Node.ELEMENT_NODE` 或 `Node.TEXT_NODE`

**方法**

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

**示例**

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` ####

在给定的索引位置插入HTML片段内容。片段通过粘贴板插件`matchers`解析，可能不与输入的HTML完全匹配。如果没有插入索引，整个编辑器的内容将会被覆盖。`source` 可能为 “`user`”, “`api`”, 或 “`silent`”。

处理不当的HTML导致 跨站脚本攻击 (XSS) 和未完全成功审查是很容易出错及导致Web漏洞的主要原因。这个方法按照`React`的例子，恰当的命名，以确保开发者采取了必要的预防措施。

**方法**

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

**示例**

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

### 设置 ###

#### `matchers` ####

匹配器数组可以传入粘贴板的设置选项。这些匹配器将附加在Quill自身的默认匹配器后。

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

#### `matchVisual` ####

默认情况下，`Quill`是不会为每一行提供填充(`padding`)或边距(`margin`)的，但是从其他网站或来源粘贴过来的可能会含有。默认情况下，`Quill`通过添加额外行来匹配这个间距，以弥补缺失的`margin/padding`。这个选择项将禁用这个行为。

var quill = new Quill('#editor', { 
      modules: { 
        clipboard: { 
          matchVisual: false
        }
      }
    });

--------------------

## 语法高亮模块 ##

语法模块通过自动检测和应用语法高亮来增强代码块的格式。优秀库`highlight.js`被用作依赖库来解析和标记代码块。

一般的，你可能需要`configure highlight.js`。但，在Quill中预计要求设置`useBR`选项为`false`。

### 示例 ###

<link href="highlight.js/monokai-sublime.min.css" rel="stylesheet">
    
    
    <script href="highlight.js"></script>
    
    <script> hljs.configure({ // optionally configure hljs languages: ['javascript', 'ruby', 'python'] }); var quill = new Quill('#editor', { modules: { syntax: true, // Include syntax module toolbar: [['code-block']] // Include button in toolbar }, theme: 'snow' }); </script>