Clipboard Module

Matchers는 클립보드에 있는 HTML을 파싱하여 지정해둔 matchers가 있을 경우 callback을 실행하는 것을 의미하는 것으로 추정됨

클립보드는 Quill 애플리케이션과 외부 애플리케이션 간에 복사, 잘라내기 및 붙여넣기를 처리합니다. matchers를 통해 추가 사용자 지정 기능을 통해 붙여넣은 내용을 제대로 해석할 수 있도록 기본 설정 집합이 존재합니다.

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.

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

API

addMatcher

클립보드에 커스텀 matchers를 추가합니다. nodeType를 사용하는 매치는 추가된 순서대로 먼저 호출되고, 그 다음에 CSS selector를 사용하는 매치는 추가된 순서대로 호출됩니다. [nodeType](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)는 Node.ELEMENT_NODE 또는 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, 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에 의해 해석되므로 정확한 input HTML이 생성되지 않을 수 있습니다. 삽입 인덱스를 제공하지 않으면 전체 에디터 내용을 덮어씁니다. source는 "user", "api" 또는 "silent"일 수 있습니다.

HTML을 잘못 처리하면 XSS(Cross site scripting)가 발생할 수 있으며 제대로 검사하지 못하는 것은 오류가 발생하기 쉽기로 악명 높으며 웹 취약성의 주요 원인입니다. 이 방법은 React의 예를 따르며 개발자가 필요한 예방 조치를 취했는지 확인하기 위해 적절하게 명명되었습니다.

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

matchers의 배열을 클립보드의 configuration options에 전달할 수 있습니다. 이 값은 Quill의 기본 matchers뒤에 추가 됩니다.

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