最速インターフェース研究会

編集インターフェースを考える

行番号付きのエディタのサンプル。
http://la.ma.la/misc/edit.html

IEでしかまともに動かない。
Firefoxの場合、textareaのonscrollを取ってくれないので、onkeydownで動くように。ただし、行番号ずれる。

wikiのエディタとして、変更行強調や、検索ハイライトなどと組み合わせることで有用に使えるようになる予定、いまのところ実用性なし。
座標で行番号を計算しているので、折り返しが入ると2行として扱われてしまう。これは痛い。気持ち悪い。行番号の意味がさほどない。
しかし、これを回避するためにはどの位置で論理的な改行がされているのかを調査する必要がある。標準のテキストエリアじゃどうやっても無理だ。

IEとmozilla限定のhtml編集コンポーネント有効にしてbrタグの回数カウントしてやるしかなさそうだ。
あまり気が進まないが、どのみちキーワード強調やハイライト付きのエディタ作るにはそれしかないのだから仕方ないか。

----
IE5.5以降使えるContentEditable
http://www.microsoft.com/japan/msdn/web/html/mshtml/createwp.asp

mozillaのhtml編集
http://www.mozilla-japan.org/editor/midas-spec.html

----
結構前から実装されてはいるのだが、一部マニアの間でしか使われておらず、驚くほど普及していない。

＞WYSIWYG でリアルタイムの編集可能な Web ページをさっそく実装しましょう（友人の羨望の的になること間違いなしです）。

まあ、4年も経ってるわけだが。
ブラウザ依存を避けて使われていないのかと思ったら、案外知られてなかったりもする。今更のようだけど、頑張ればFirefoxとIE両方で動くリッチエディタを作れるようになったことで、今後普及してくるかもしれない。

無理やりスクリプト混在させるより、IE用、Firefox用と分けてしまった方が楽だろうな。

----
ちなみにContentEditable属性はwebサイトを印刷する時に、広告やいらない部分を消したりするのに使うと便利。

ちなみにMSDNで紹介されているUserDataもあまり知られていない。Cookieの代わりに使えて、サイトに関連付けたテキストをローカルに保存できる。これを使えばサーバーにテキストを保存しない個人用のWikiなんてのも作れる。メモ帳なら以前作ったが、オートリンクや整形などを備えたWikiを作れたら面白いかもしれない、草稿はUserDataへ、書き終えたらサーバーにアップロード、といった。

A quick preview will be rendered here when you click "Preview" button.