Textarea Editor

Javascript で textarea エディタを作ってみた。世の中には Rich Text エディタもあるが、僕はああいうものは嫌いである。
ここで紹介するのはエディタにとって重要な、そして(ブラウザでエディタを作る場合には)最も難しい文字列の探索/置換を行う、コアの部分だけである。

試してみる

注意事項:

Mozilla 系(firefox,Camino)と Opera で動作確認されている(IE はサポートされていない)
探索は(テキストの先頭からではなく)入力カーソルの位置から始まる

次の工夫がある。

ウインドウリサイズで textarea の領域も自動的にリサイズされる
行探索の行欄を空白にすると入力カーソルが位置している現在行の番号が表示される

IE のサポートにおいて最大の困難は、文字カーソルの現在位置(テキストエリアの先頭から数えた文字カーソルまでの文字数)を捕えられないことにある。ネットを調べてみると、この問題に関していろいろ書かれているが、僕にはどうも分からない。また、「できた」と言っているページにも実用に堪えないようなバグがあったりする。どなたか教えて貰えれば幸いです。

編集中に文字の大きさを変えたい場合があります。 Mac OSX の場合には command-shift-'+' などで文字を大きくできますが、このイベントを捕える事が可能であれば、変化した文字の横幅が分かります。(この情報は探索した文字列が常に見えるようにするために必要です。) しかし現状ではどうやら不可能らしい。文字の大きさを変更した場合にはリロードをすれば正しい文字幅が得られます。もっともここに示されたデモではリロードした時に自動的にサンプルテキストもリロードされるようになっていますから、変更がキャンセルされてしまいます。

ブラウザの問題点

以下は Textarea に関する OSX のブラウザの問題点(バグ)

Opera

Opera 9.23 は textarea をリセットすると改行コードが 0B (16進)に化けて改行されなくなる。

Safari

Safari 3.03 は textarea にテキストを読み取ると改行コードが消されてで改行されない。
Safari 2 はこの問題は発生しない。