PJCHENder 未整理筆記

[NPM] Quill 使用筆記

2018-07-19

@(JavaScript)[NodeJS, npm]

[NPM] Quill 使用筆記

Quill

Configuration

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 :

1
2
3
4
5
6
7
8
9
10
11
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

常見問題

Tags: npm

掃描二維條碼,分享此文章