最近、仕事でcontenteditableの挙動に苦しめられている。

contenteditableと言えば、IEで使える編集可能なdivと言ったところか。あと、よろしくexecCommandとかやってあげると、タグを付けてくれたりしてくれる。Mozillaの方で同じようなことをするには、designmodeとかあるらしいのだが、それは使用していない。今作っているのが、IE限定なので。

そのため、IEの挙動をチェックしなければいけないので、まず、普段使っている開発環境をWinにしなければならない。その時点でかなり萎える。そして、contenteditableの中でいろいろすると、やってほしくないことまで勝手に補間されてしまうのだ。

世間一般にあるwysiwygHTMLエディタに、TinyMCEや、FCKeditor、DojoのRich Text Editorとかあるんだけど、どうも嫌だ。wordpressにもデフォルトでTinyMCEが入っていたが、速攻外したし。でも、まぁ、普段ブラウザはfirefoxを使っているから、まだいいのだが、IEの挙動は許せん。

改行すると勝手にPタグを突っ込むので、イベントを見張って、BRタグに変更してあげたり、まぁ、めんどくさいことをいろいろしていたのだが、今回の挙動については激しく鬱になる。
それは、勝手にハイパーリンクを補うことだ。
例えば、shin@homeとか書いたりすると、勝手にメールアドレスと判断して、mailtoのハイパーリンクをつける。同様にhttp://hogehogeとかしても、ハイパーリンクとなる。まぁ、後者のhttp://から始まるのはある程度しょうがないかなーなんて思っているわけだが、shin@homeを変えられるのは嫌だ。メールアドレスとして判別するならば、もう少しマシなチェックをしてもらいたい。ちゃんとその文字列がメールアドレスか正規表現であるでしょ、と小一時間。。。まぁ、これも見張っていて、mailtoのハイパーリンクが来た途端、取り除くってすればいいのかな。他の有効なハイパーリンクとの違いとかを考慮しないといけないので、面倒だけど。

で、実は、フルスクラッチで書いている私が馬鹿で既存のライブラリを使ったら行けるかな、と思って、TinyMCE、FCKeditor、DojoのRich Text Editorを使って実験してみた。Mozillaは問題なし。IEは同じところで勝手にハイパーリンクとなる。もう、これだけメジャーなライブラリがこれなら、拘らなくていいような気がしてきた。しかし、この挙動はウンザリで、contenteditableなんて使いたくないと心から思ったさ。

というわけで、考えていたら、今日少しアイデアが出た。Flashで作ればいいんじゃないの？contenteditableを使用し、自分が制御できないところがあるのが問題なわけで、Flashでやったら、全部制御できるwysiwygエディタが出来そうな予感。実は私は、ActionScriptを昔よく書いていたので、いけるかもしんない。2年ほど書いていないので、ブランクはあるが。。時間があるときにやってみようかなー。いかん、他にやらんといかんことがまだまだある。

Flashでのwysiwygっぽいツールとしては、NOTAというのがあるけど、もう少し構造的なHTMLを書けるものがいいなー。NOTAは、HTML表示するとposition指定をしているって感じで、見た目重視な感じがするので、ちょっと違うって感じがする。あ。でも、DojoのRich Text Editorのチュートリアルに書いてあるように、WYSHASMWMOMNBWYGなんてユーザは考えてねーよ。ってことなので、私のこの考えは逆流しているかもしれない。。。

というわけで今日初めて、WYSHASMWMOMNBWYGという言葉を知りました。”What You See Has A Semantic Meaning Which May Or May Not Be What You Get”の略だって。なげーよ！