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

粘贴板(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, '&nbsp;<b>World</b>');
// Editor is now '<p>Hello&nbsp;<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。

示例

<!-- Include your favorite highlight.js stylesheet -->
<link href="highlight.js/monokai-sublime.min.css" rel="stylesheet">

<!-- Include the highlight.js library -->
<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>