| 目次 |
|---|
|
・編集可能なドキュメント ・Text Selection API ・Editing API |
これまでのウェブコンテンツでは、テキスト入力フィールドやテキストエリアでのみ、文章の編集ができました。
html5では、編集できる範囲はテキスト入力フィールドやテキストエリアに限らず、通常のコンテンツでも編集が出来るようになります。
また、テキストの選択についても、通常のコンテンツを含めて制御が出来るようになります。
またテキスト編集そのものも、単なるテキストのみではなく、ワープロ感覚でリッチテキストとして編集できるようになります。
このページでは、html5によって実現できるコンテンツ編集に関するAPIをご紹介します。
Text Selection APIは、選択されたテキストの情報を取得するための仕組み(API)です。
「フォームの強化 APIの強化」で、テキスト入力フィールドやテキストエリアでのテキスト選択取得について述べています。
実は、テキスト選択の制御はテキスト入力フィールドやテキストエリアに限らず、テキストコンテンツを持つ要素全てに適用出来るAPIが策定されています。
それが、「Text Selection API」です。
Text Selection APIは、2011年8月現在以下のブラウザで対応しています。
FireFox 4～、Safari 5～、Google Chrome 9～、Opera 11～、IE 9～
但し、実装の度合いや選択されたテキストに含まれる特殊文字などは、ブラウザにより異なりますので、ご注意ください。
選択範囲は「Selection」オブジェクトとして提供されます。
「Selection」オブジェクトは、「getSelection」メソッドで取得することができます。
仕様上は、windowオブジェクトからでも、documentオブジェクトからでも同じ「Selection」オブジェクトを取得します。
但し、FireFox、Operaに関しては、documentオブジェクトからの「getSelection」メソッドは、「Selection」オブジェクトではなく、テキストのみを取得します。
ブラウザでの差異に対応するためには、「window.getSelection()」を使う方がよいです。
window.getSelection(); document.getSelection();
選択されたテキストは、「toString」メソッドにて取り出すことができます。
その他のプロパティは以下の通りです。
リスト1. 選択されたテキスト情報の取得
//テキスト選択情報を取得。(Windowオブジェクト)
function mySelectWin(){
//選択テキストを取得
var selection = window.getSelection();
//選択内容を取得
try{
var text = selection.toString();
}
catch( e ){
var text = "";
}
//選択状態を取得
var str = "";
var node = null;
try{
str += "選択状態:" + selection.isCollapsed + "\n";
node = selection.anchorNode;
if( node !== null ){
str += "開始ノード:" + node.parentNode.tagName + "\n";
str += "開始位置:" + selection.anchorOffset + "\n";
}
node = selection.focusNode;
if( node !== null ){
str += "終了ノード:" + node.parentNode.tagName + "\n";
str += "終了位置:" + selection.focusOffset + "\n";
}
}
catch( e ){
str = "エラー:" + e.message + "\n";
}
//結果の表示
alert(
"window.getSelection : " + typeof( selection ) + "\n" +
"テキスト : " + text + "\n" +
str
);
}
//テキスト選択情報を取得。(Documentオブジェクト)
function mySelectDoc(){
//選択テキストを取得
var selection = document.getSelection();
//選択内容を取得
try{
var text = selection.toString();
}
catch( e ){
var text = "";
}
//選択状態を取得
var str = "";
var node = null;
try{
str += "選択状態:" + selection.isCollapsed + "\n";
node = selection.anchorNode;
if( node !== null ){
str += "開始ノード:" + node.parentNode.tagName + "\n";
str += "開始位置:" + selection.anchorOffset + "\n";
}
node = selection.focusNode;
if( node !== null ){
str += "終了ノード:" + node.parentNode.tagName + "\n";
str += "終了位置:" + selection.focusOffset + "\n";
}
}
catch( e ){
str = "エラー:" + e.message + "\n";
}
//結果の表示
alert(
"document.getSelection : " + typeof( selection ) + "\n" +
"テキスト : " + text + "\n" +
str
);
}
実装例
※このページ内でテキストを選択状態にして、上記ボタンを押してみてください。
選択範囲を親要素全体に変更したり、選択した範囲を削除することもできます。
リスト2. 選択範囲の操作
//選択範囲を親要素全体に変更
function mySelectAll(){
//選択テキストを取得
var selection = window.getSelection();
//選択状態を取得
var node = null;
try{
if( ! selection.isCollapsed ){
node = selection.anchorNode.parentNode;
selection.selectAllChildren(node);
}
}
catch( e ){
alert("エラー:" + e.message + "\n");
}
}
//テキスト選択をコンテンツから削除
function mySelectDelete(){
//選択テキストを取得
var selection = window.getSelection();
//選択範囲を削除
selection.deleteFromDocument();
}
//応用例
//選択の解除
function mySelectClear(){
//選択テキストを取得
var selection = window.getSelection();
//空ノードの作成
var node = document.createElement('span');
try{
if( ! selection.isCollapsed ){
//空ノードを選択
selection.selectAllChildren(node);
}
}
catch( e ){
alert("エラー:" + e.message + "\n");
}
}
実装例
※このページ内でテキストを選択状態にして、上記ボタンを押してみてください。
Editing APIは、ワープロ感覚でリッチテキストとして編集するための仕組み(API)です。
「WISYWIGエディタ」と呼ばれるテキストエリアをJavascriptでワープロやリッチテキストエディタのように編集できる仕組みはよく知られています。
この「WISYWIGエディタ」と同様なことをウェブ標準でできるAPIを、html5で策定しようとしているのが、「Editing API」です。
Editing APIは、2011年8月現在以下のブラウザで対応しています。
FireFox 4～、Safari 5～、Google Chrome 9～、Opera 11～、IE 9～
Editing APIでは、各メソッドにより編集操作を行います。
各コマンドは、選択テキストに対して実行されます。
以下は、その各メソッドになります。
他に「execCommandIndeterm」、「execCommandState」、「execCommandValue」などのメソッドがありますが、その実装度合いは各ブラウザにより異なります。
Editing APIを利用する上で、編集コマンドは選択したテキストを装飾する基本コマンドです。
実際には、選択された要素を装飾要素で囲うことになります。
編集コマンドには、以下のようなものがあります。