Quill을 사용해서 텍스트 에디터 만들기:Modules(#7-1)

onezerokang·2021년 8월 29일
0

Quill

목록 보기
6/12
post-thumbnail

Modules

모듈을 통해 Quill의 동작과 기능을 커스텀 할 수 있습니다. 공식적으로 지원되는 모듈 몇개를 선택할 수 있으며, 일부는 옵션을 커스텀할 수 있습니다. 자세한 내용은 해당 설명서 페이지를 참조하십시오.

모듈을 활성화 하려면 Quil의 config에 모듈을 추가하면 됩니다.

var quill = new Quill('#editor', {
  modules: {
    'history': {          // Enable with custom configurations
      'delay': 2500,
      'userOnly': true
    },
    'syntax': true        // Enable with default configuration
  }
});

Clipboard, Keyboard, History 모듈은 Quill에 필수로 필요한 모듈이며, 명시적으로 포함할 필요는 없습니다. 다만 다른 모듈처럼 설정할 수 있습니다.

Extending


모듈을 확장했다가 다시 등록하여 원래 모듈을 대체할 수도 있습니다. 필요한 모듈도 재등록 및 교체할 수 있습니다.

var Clipboard = Quill.import('modules/clipboard');
var Delta = Quill.import('delta');

class PlainClipboard extends Clipboard {
  convert(html = null) {
    if (typeof html === 'string') {
      this.container.innerHTML = html;
    }
    let text = this.container.innerText;
    this.container.innerHTML = '';
    return new Delta().insert(text);
  }
}

Quill.register('modules/clipboard', PlainClipboard, true);

// Will be created with instance of PlainClipboard
var quill = new Quill('#editor');

참고: 이 예는 가능한 내용을 표시하기 위해 선택되었습니다. 기존 모듈이 제공하는 API 또는 구성만 사용하는 것이 더 쉬운 경우가 많습니다. 이 예에서 기존 클립보드의 addMatcher API는 대부분의 붙여넣기 사용자 지정 시나리오에 적합합니다.

profile
블로그 이전 했습니다: https://techpedia.tistory.com

0개의 댓글