Keyboard モジュールは、特定のコンテキストでのキーボード イベントのカスタム動作を有効にします。 Quill はこれを使用して書式設定ホットキーをバインドし、ブラウザーの望ましくない副作用を防ぎます。
キーボード ハンドラーは、特定のキーとキー修飾子にバインドされています。のkeyは JavaScript イベント キー コードですが、英数字キーと一部の共通キーには文字列の省略表現が許可されます。
主要な修飾子には次のものがあります。metaKey、ctrlKey、shiftKeyとaltKey。加えて、shortKeyは、次と同等のプラットフォーム固有の修飾子です。metaKeyMac 上とctrlKeyLinux と Windows 上で。
ハンドラーは次のように呼び出されます。thisキーボード インスタンスにバインドされ、現在の選択範囲が渡されます。
quill.keyboard.addBinding({
key: 'B',
shortKey: true
}, function(range, context) {
this.quill.formatText(range, 'bold', true);
});
// addBinding may also be called with one parameter,
// in the same form as in initialization
quill.keyboard.addBinding({
key: 'B',
shortKey: true,
handler: function(range, context) {
}
});
修飾キーがfalse、モディファイアがアクティブではないことを意味すると想定されます。合格することもできますnull修飾子の任意の値を意味します。
// Only b with no modifier will trigger
quill.keyboard.addBinding({ key: 'B' }, handler);
// Only shift+b will trigger
quill.keyboard.addBinding({ key: 'B', shiftKey: true }, handler);
// Either b or shift+b will trigger
quill.keyboard.addBinding({ key: 'B', shiftKey: null }, handler);
複数のハンドラーを同じキーと修飾子の組み合わせにバインドすることができます。ハンドラーは、バインドされた順序で同期的に呼び出されます。デフォルトでは、ハンドラーは、明示的に返さない限り、次のハンドラーへの伝播を停止します。true。
quill.keyboard.addBinding({ key: 'tab' }, function(range) {
// I will normally prevent handlers of the tab key
// Return true to let later handlers be called
return true;
});
注: Quill のデフォルトのハンドラーは初期化時に追加されるため、それを防ぐ唯一の方法は、構成。
コンテキストを使用すると、特定のシナリオでのみ呼び出されるハンドラーをさらに指定できます。コンテキストが指定されているかどうかに関係なく、コンテキスト オブジェクトはすべてのハンドラーの 2 番目のパラメーターとして提供されます。
// If the user hits backspace at the beginning of list or blockquote,
// remove the format instead delete any text
quill.keyboard.addBinding({ key: Keyboard.keys.BACKSPACE }, {
collapsed: true,
format: ['blockquote', 'list'],
offset: 0
}, function(range, context) {
if (context.format.list) {
this.quill.format('list', false);
} else {
this.quill.format('blockquote', false);
}
});
もしもtrue、ハンドラーは、ユーザーの選択が折りたたまれている場合、つまりカーソル形式の場合にのみ呼び出されます。もしもfalse、ユーザーがテキストを強調表示した場合など、ユーザーの選択範囲はゼロ以外の長さである必要があります。
もしもtrue、ユーザーの選択が空の行にある場合にのみ呼び出されます。false空でない行の場合。 empty を true に設定すると、collapsed も true になり、オフセットが 0 になることを意味します。そうでない場合、ユーザーの選択は空行にならないことになります。
// If the user hits enter on an empty list, remove the list instead
quill.keyboard.addBinding({ key: Keyboard.keys.ENTER }, {
empty: true, // implies collapsed: true and offset: 0
format: ['list']
}, function(range, context) {
this.quill.format('list', false);
});
配列の場合、次の場合にハンドラーが呼び出されます。どれでも指定されたフォーマットがアクティブです。オブジェクトの場合、全て指定された形式の条件を満たす必要があります。どちらの場合も、コンテキスト パラメーターのフォーマット プロパティは、現在アクティブなすべてのフォーマットのオブジェクトとなり、同じものが返されます。quill.getFormat()。
var context = {
format: {
list: true, // must be on a list, but can be any value
script: 'super', // must be exactly 'super', 'sub' will not suffice
link: false // cannot be in any link
}
};
ハンドラーはユーザーの選択が開始されたときにのみ呼び出されますoffset行頭からの文字。これは印刷可能なキーが適用される前であることに注意してください。これは、他のコンテキスト仕様と組み合わせると便利です。
ユーザーの選択範囲の開始位置の直前のテキストと一致する必要がある正規表現。テキストはフォーマットの境界を越えて一致しません。供給されたcontext.prefixvalue は、正規表現の一致だけではなく、直前のテキスト全体になります。
// When the user types space...
quill.keyboard.addBinding({ key: ' ' }, {
collapsed: true,
format: { list: false }, // ...on an line that's not already a list
prefix: /^-$/, // ...following a '-' character
offset: 1, // ...at the 1st position of the line,
// otherwise handler would trigger if the user
// typed hyphen+space mid sentence
}, function(range, context) {
// the space character is consumed by this handler
// so we only need to delete the hyphen
this.quill.deleteText(range.index - 1, 1);
// apply bullet formatting to the line
this.quill.formatLine(range.index, 1, 'list', 'bullet');
// restore selection
this.quill.setSelection(range.index - 1);
// console.log(context.prefix) would print '-'
});
と同じprefixただし、ユーザーの選択範囲の終了位置の直後にあるテキストの一致は除きます。
デフォルトでは、Quill には、タブによるリストのインデントなど、いくつかの便利なキー バインディングが付属しています。初期化時に独自のものを追加できます。
一部のバインディングは、Enter キーや Backspace キーなどの危険なブラウザのデフォルトを防ぐために不可欠です。これらのバインディングを削除して、ネイティブのブラウザーの動作に戻すことはできません。ただし、構成で指定されたバインディングは Quill のデフォルトより前に実行されるため、特殊なケースを処理し、それ以外の場合は Quill に伝播することができます。
バインディングを追加するquill.keyboard.addBindingデフォルトのバインディングはその時点までに追加されているため、Quill より前には実行されません。
各バインディング構成には次のものが含まれている必要がありますkeyとhandlerオプションがあり、オプションで次のいずれかを含めることができます。contextオプション。
var bindings = {
// This will overwrite the default binding also named 'tab'
tab: {
key: 9,
handler: function() {
// Handle tab
}
},
// There is no default binding named 'custom'
// so this will be added without overwriting anything
custom: {
key: 'B',
shiftKey: true,
handler: function(range, context) {
// Handle shift+b
}
},
list: {
key: 'backspace',
format: ['list'],
handler: function(range, context) {
if (context.offset === 0) {
// When backspace on the first character of a list,
// remove the list instead
this.quill.format('list', false, Quill.sources.USER);
} else {
// Otherwise propogate to Quill's default
return true;
}
}
}
};
var quill = new Quill('#editor', {
modules: {
keyboard: {
bindings: bindings
}
}
});
DOM イベントと同様、Quill キー バインディングは一致するたびに呼び出しをブロックするため、非常に一般的なキー バインディングに非常に高価なハンドラーを使用するのは悪い考えです。次のような一般的なブロック DOM イベントにアタッチする場合と同じパフォーマンスのベスト プラクティスを適用します。scrollまたmousemove。