コンピュータクワガタ

かっぱのかっぱによるコンピュータ関連のサイトです

リッチテキストAPI

HTML5でリッチテキストAPIが標準化されていることを、今日知りましたww
ということで早速調べてみた。まず、仕様としては以下の部分がそれに当たる。

7.5 The contenteditable attribute

http://www.w3.org/TR/html5/editing.html#contenteditable

contenteditable属性を指定することで編集可能になる。属性値としてはtrue、false、指定なしのいずれかを指定できる。指定なしの場合にはtrueを指定したことになる。

最初にただ編集できるだけのサンプルを示す。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>コンテンツの編集</title>
  <style type="text/css">
#editArea {
  border: solid 1px #000000;
  width: 300px;
  height: 300px;
}
  </style>
 </head>
 <body>
  <div id="editArea" contenteditable></div>
 </body>
</html>

このサンプルは、http://kuwalab.net/html5/contenteditable1.htmlに置いた。

実行すると以下のようになる。

divから縦に文字が溢れたらどうなるかと見ていたら、普通にはみ出た。これは高さを指定しているためで、高さを指定しないかあふれた場合のスタイルを指定することで解決できる。ソースは以下に示す。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>コンテンツの編集2</title>
  <style type="text/css">
#editArea1 {
  border: solid 1px #000000;
  width: 300px;
}

#editArea2 {
  border: solid 1px #000000;
  width: 300px;
  height: 100px;
  overflow: scroll;
}
  </style>
 </head>
 <body>
  <div id="editArea1" contenteditable></div>
  <div id="editArea2" contenteditable></div>
 </body>
</html>

実行結果は以下。それぞれ、行があふれた場合に自動で高さが変わる、スクロールするのがわかる。

このサンプルは、http://kuwalab.net/html5/contenteditable2.htmlに置いた。

続きはきっと書く。