« Jetpack SDK 0.5 の Reuqest API | Jetpack SDK 0.5 の Unload API » |
Jetpack SDK 0.5 の Selection API
Jetpack SDK 0.5 で追加された Selection API を使用すると、選択範囲の取得や変更などが可能となります。
Selection API を使用するためには、はじめに require 関数でモジュールをインポートします。
var selection = require("selection");
選択範囲の取得
Selection API の text
および html
プロパティで選択範囲の文字列あるいはHTMLソースを取得・変更することが可能です。また、Ctrlキーを押下しながら複数の範囲を選択した場合、 contigious
プロパティが false となります。この時、 Selection API のオブジェクト自体に対して for ~ in ループで個々のサブ選択範囲(Selection オブジェクト)を取得することが可能です。
以下は、選択範囲が複数ある場合を考慮し、全ての選択範囲のHTMLソースをコンソールへ出力する例です。
if (selection.contiguous) {
// 選択範囲がひとつだけの場合
console.log(selection.html);
}
else {
// 複数の選択範囲がある場合
for (var subsel in selection) {
console.log(subsel.html);
}
}
範囲を選択したときのコールバック処理
onSelect
プロパティによって、範囲を選択したときのコールバック処理を追加することが可能です。以下は、範囲を選択した時に、その選択範囲を <span> タグで囲み、蛍光ペンで着色したような表示にする例です。
selection.onSelect = function() {
selection.html = '<span style="background-color: yellow;">' + selection.html + '</span>';
};