contentEditableでリッチテキストエディタ

HTML5では全ての要素でcontentEditableプロパティが使えます。
それを利用して「リッチテキスト」を作成するプログラムを作りました。
JavaScriptが扱える人なら容易に機能を拡張することができます。

何気なく思いついて作ってみたけど、なかなかの拡張性で実用性が高そう。



画面はこんな感じです。



「html」「編集不可」「clickハンドラ設置」などのボタンの下のエリアはiframeです。
起動直後はiframe内部は自由に編集できる状態になっています。
画像をドラッグ移動させたい時など必要に応じてcontentEditableのtrue/falseを切り替えられます。

「html」ボタンを押すとメモ帳が起動して、編集内容に対応するHTMLソースが表示されます。



上記ソースを「拡張子：htm」などにして保存して



そのファイルを開くと、編集中の表示そのままのHTMLが表示されます。



ちなみに先ほどのメモ帳の画面で、中身を編集して上書き保存し、



メモ帳を閉じると編集プログラム側の表示に編集内容が反映されます。



以下、ソース

「設定/viewエリア内の選択中エレメント向け機能」フォルダ内にフォルダを追加すると



「選択中エレメント用機能：」のリストに表示されます。



上記機能はiframe内で最後にクリックした要素に対して動作します。


フォルダ内の「func.js」を編集すると動作内容を変更できます。