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

Toolbar module을 사용하면 Quill의 콘텐츠의 format을 쉽게 지정할 수 있습니다.

사용자 정의 container 및 handler를 사용하여 구성요소를 변경할 수 있습니다.

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: '#toolbar',  // Selector for toolbar container
      handlers: {
        'bold': customBoldHandler
      }
    }
  }
});

컨테이너 옵션은 매우 일반적이기 때문에 toolbar의 value에 바로 넣는 것도 가능합니다.

var quill = new Quill('#editor', {
  modules: {
    // Equivalent to { toolbar: { container: '#toolbar' }}
    toolbar: '#toolbar'
  }
});

Container

Toolbar 컨트롤은 단숭 배열 형식 이름 또는 사용자 정의 HTML 컨테이너로 지정할 수 있습니다.

간단한 배열 옵션으로 사용하는 방법:

var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  }
});

컨트롤을 배열 내포 수준별로 그룹화할 수도 있습니다. 이렇게 하면 컨트롤이 classname ql-format 형식으로 으로 래핑되어 테마가 사용할 수 있는 구조를 제공합니다. 예를 들어 snow에는 제어그룹 사에에 추가 간격이 추가됩니다.

var toolbarOptions = [['bold', 'italic'], ['link', 'image']];  

사용자 지정 값이 있는 버튼은 format 이름을 유일한 키로 사용하여 객체를 지정할 수 있습니다.

var toolbarOptions = [{ 'header': '3' }];

드롭다운은 객체에 지정되지만 가능한 값의 배열이 있습니다. CSS는 드롭다운 옵션의 시각적 레이블을 제어하는 데 사용됩니다.

// Note false, not 'normal', is the correct value
// quill.format('size', false) removes the format,
// allowing default styling to work
var toolbarOptions = [
  { size: [ 'small', false, 'large', 'huge' ]}
];  

참고: 테마는 드롭다운의 기본값을 지정할 수 도 있습니다. 예를 들어, snow는 빈 배열로 설정된 경우 color 및 background format에 대한 35가지 색상을 기본으로 제공합니다.

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

더 많은 커스텀이 필요할 경우 HTML에서 수동으로 toolbar를 작성하고 DOM element 또는 selector를 Quill에 전달 할 수 있습니다. ql-toolbar 클래스가 toolbar container에 추가되고 Quill이 classname이 ql-${format}인 <button>및 <select> element에 적절한 핸들러를 연결합니다. 버튼 요소에는 선택적으로 사용자 지정 값 속성이 있을 수 있습니다.

<!-- Create toolbar container -->
<div id="toolbar">
  <!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="small"></option>
    <!-- Note a missing, thus falsy value, is used to reset to default -->
    <option selected></option>
    <option value="large"></option>
    <option value="huge"></option>
  </select>
  <!-- Add a bold button -->
  <button class="ql-bold"></button>
  <!-- Add subscript and superscript buttons -->
  <button class="ql-script" value="sub"></button>
  <button class="ql-script" value="super"></button>
</div>
<div id="editor"></div>

<!-- Initialize editor with toolbar -->
<script>
  var quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar'
    }
  });
</script>  

사용자 고유의 HTML 요소를 제공하여 Quill은 특정 입력 요소를 가져오지만 Quill와 상관없는 사용자 고유의 입력은 여전히 추가 및 스타일이 가능하며 공존하 수 있습니다.

<div id="toolbar">
  <!-- Add buttons as you would before -->
  <button class="ql-bold"></button>
  <button class="ql-italic"></button>

  <!-- But you can also add your own -->
  <button id="custom-button"></button>
</div>
<div id="editor"></div>

<script>
var quill = new Quill('#editor', {
  modules: {
    toolbar: '#toolbar'
  }
});

var customButton = document.querySelector('#custom-button');
customButton.addEventListener('click', function() {
  console.log('Clicked!');
});
</script>

Handlers

Toolbar는 기본적으로 format을 적용하고 제거하지만 외부 UI를 표기하기 위해 커스텀 핸들러로 덮어쓸 수 있습니다.

핸들러 함수는 toolbar에 바인딩되며(따라서 이 기능을 사용하면 toolbar 인스턴스를 참조함) 해당 형식이 비활성인 경우 입력의 값 속성을 전달하고 그렇지 않은 경우 false를 전달합니다. 사용자 지정 핸들러를 추가하면 기본 toolbar 및 테마를 덮었습니다.

var toolbarOptions = {
  handlers: {
    // handlers object will be merged with default handlers object
    'link': function(value) {
      if (value) {
        var href = prompt('Enter the URL');
        this.quill.format('link', href);
      } else {
        this.quill.format('link', false);
      }
    }
  }
}

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  }
});

// Handlers can also be added post initialization
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', showImageUI);