Skip to main content

[note] quill 筆記

Quill

Configuration#

如果要在 toolbar 的 options 中設定 containerhandlers,可以這樣設定:

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

常見問題#

Last updated on