イントロダクション
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 による、ローカルストレージ併用の実装例については https://html5demos.com/contenteditable で確認する事が出来ます。ソースコードを参照してみて下さい。
関連情報
- How to interact with the content (old IE style API)
- Mozilla におけるリッチテキスト編集