[note] quill 筆記

Quill

Configuration

如果要在 toolbar 的 options 中設定 container 和 handlers，可以這樣設定：

const toolbarOptions = {
  container: [
    ['bold', 'italic', 'underline', 'strike'],
    ['link', 'image'],
    // ...
  ],
  handlers: {
    link: function (value) {
      // ...
    },
    image: function (value) {
      // ...
    },
  },
};

const quillOptions = {
  modules: {
    toolbar: toolbarOptions,
  },
};

var quill = new Quill('#editor', quillOptions);

Usage

如果想要取得使用者目前的游標位置，可以使用 getSelection() API ：

var range = quill.getSelection();
if (range) {
  if (range.length == 0) {
    console.log('User cursor is at index', range.index);
  } else {
    var text = quill.getText(range.index, range.length);
    console.log('User has highlighted: ', text);
  }
} else {
  console.log('User cursor is not in editor');
}

客制化事件處理（custom handlers）

處理函式（handler function）會和 toolbar 綁定，因此使用 this 會指稱到 toolbar 實例，

Handler functions will be bound to the toolbar (so using this will refer to the toolbar instance) and passed the value attribute of the input if the corresponding format is inactive, and falseotherwise. Adding a custom handler will overwrite the default toolbar and theme behavior.

handlers @ Quill > modules > toolbar

Stimulus Controller

Quill + Rails + Stimulus @ PJCHENder Gist

常見問題

• Documentation for custom handler aside default controls