読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

HTML Editing APIsが面白い

HTML5
<スポンサーリンク>

HTML Editing APIsというのは、ブラウザ上で、ワープロみたいにテキストの編集ができるようになる機能のことです。
ブログとかではよく、文字を大きくしたり色を付けたりする編集機能があって、それはたぶんボタンを押すとJavaScriptでタグをつけていると思うのですが、それをHTML5で策定された新しいAPIを使って、より簡単に実装することができそうです。

サンプルを見てみます。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Editing APIs</title>
<style>
#toolbar * {
	vertical-align: middle;
}

#editspace {
  width: 450px;
  height: 300px;
  padding: 30px;
  border: 1px solid #aaa;

}


</style>
</head>
<body>
<div id="toolbar">
  <button onclick="document.execCommand('bold')">太字にする</button>
  <button onclick="document.execCommand('forecolor', false, forecolor.value)">文字色</button><input id="forecolor" type="color" value="#FF0000">
  <button onclick="document.execCommand('backcolor',false,backcolor.value)">背景色</button><input id="backcolor" type="color" value="#FFFF00">
  <button onclick="document.execCommand('fontsize', false,fontsize.value)">文字サイズ</button>
  <input id="fontsize" type="number" value="4" min="1" style="width:10px;" required step="0.5"></div>
</div>

<!-- エディタ部分はここに定義する -->
<div id="editspace" contentEditable="true"></div>


</body>
</html>

このサンプルをブラウザで見ると、以下の画像のようになります。
f:id:sho322:20140416073551j:plain

テキストを編集できているのがわかります。

上のサンプルではboldやforecolorといった、太字にしたり色を付けたり、という処理を見てきたけれど、HTML Editing APIsは他にもいろんなことができます。
たとえば、ハイパーリンクを設定したり、画像を挿入したりですね。

下のAPIの一覧を見ると、ブログサイトの編集画面でやっているようなことのだいたいがカバーされているように思えました。

◆Editing APIのコマンド

bold
選択したテキストを、太字にしたり、太字を解除したりします。
装飾方法はブラウザによって異なります。


italic
選択したテキストを、斜体にしたり、斜体を解除したりします。


subscript
選択したテキストを、下付け文字にしたり、下付け文字を解除したりします。


superscript
選択したテキストを、上付け文字にしたり、上付け文字を解除したりします。


delete
選択したテキストを、削除します。
もしくはカーソル前の文字を1文字削除します。
Safari、Chromeでのみ動作します。


forwordDelete
選択したテキストを、削除します。
もしくはカーソルの次の文字を1文字削除します。
Safari、Chromeでのみ動作します。


insertImage
選択した範囲を、新規の画像と入れ替えます。
画像を選択する場合は
document.execCommand('insertImage', true, null);
画像URLを直接指定する場合は
document.execCommand('insertImage', false, url);
とします。
IEは、必ずテキストの選択が必要です。


insertHTML
選択した範囲を、HTMLコードと入れ替えます。
document.execCommand('insertHTML', false, "ここにHTMLコードを入れます");
IEには対応していません。


insertText
選択した範囲を、テキストと入れ替えます。
document.execCommand('insertText', false, "ここにテキストを入れます");<>は、<及び>となります。
Safari、Chromeでのみ動作します。


insertLineBreak
カーソル位置に改行を入れます。
Safari、Chromeでのみ動作します。


insertOrderedList
選択されたテキストを、順序リスト(ol)に変換します。


insertUnorderedList
選択されたテキストを、非順序リスト(ul)に変換します。


formatBlock
選択されたテキストを、指定した要素で囲みます。
document.execCommand('formatBlock', false, "要素タグ");


insertParagraph
カーソル位置でブロックを分割します。
実際はカーソル前後を別々にp要素またはdiv要素で囲みます。
装飾方法はブラウザによって異なります。


createLink
選択した範囲を、ハイパーリンクしたり、解除したりします。
リンク先を対話型で選択する場合は
document.execCommand('createLink', true, null);
リンクURLを直接指定する場合は
document.execCommand('createLink', false, url);
とします。
対話型はIEのみ対応しています。


unlink
選択テキストを含むハイパーリンクを解除します。


selectAll
フォーカスを当てている領域のコンテンツを全て選択状態にします。


unselect
選択しているテキストを解除します。


undo
直前のコマンドの実行を取り消します。


redo
直前に取り消されたコマンドを再実行します。

(引用元)http://www.nail-kobe.com/html5/html5_3200.html

<参考文献>
HTML5 テクニックバイブル