Content Editable

イントロダクション

HTML5 では、全ての要素を編集可能状態 (editable) にする事が出来ます。これはずっと以前から独自実装として存在したものですが、現在は WHATWG によって標準化されています。JavaScript の幾つかのイベントハンドラと併用する事で、ウェブページを多機能で且つ高速に動作するリッチテキスト・エディターにしてしまう事も可能です。

互換性

contenteditable 属性は、現行の主要なデスクトップブラウザ全てに実装されています。但しモバイルブラウザに於いては Firefox Mobile などの一部のブラウザにしか実装は無いようです(※最新状況については別途確認して下さい)

  • Firefox 3.5+
  • Chrome 6.0+
  • Internet Explorer 6.0+
  • Safari 3.2+
  • Opera 8+
  • iOS Safari 5.0+
  • Android Browser 3.0+

どのような挙動を示すか

HTML ルート要素(<html>)の contenteditable 属性を true にすると、その子孫となる他の全ての要素の内容が編集可能となります。

以下に簡単な記述例を示します。

<!DOCTYPE html>
<html>
<body>
  <div contenteditable="true">
    このテキストは閲覧者が編集する事が出来ます。
  </div>
</body>
</html>

JavaScript による、ローカルストレージ併用の実装例については http://html5demos.com/contenteditable で確認する事が出来ます。ソースコードを参照してみて下さい。

関連情報

Document Tags and Contributors

Contributors to this page: ethertank
最終更新者: ethertank,