javascript製、WYSIWYGエディタで先頭のP要素がBSキーで消えないようにしてみた

OneThird CMSで使用しているWYSIWYGエディタtryitEditorをバージョンアップしてみました

http://onethird.net/tryitEditor/

今回の修正は、BS（back space)キーを押した時、p要素の先頭まで行くと、そのp要素が消えていた仕様を変更し、BS動作をキャンセルするようにしました

tryitEditorではcontenteditable=trueをつかて編集機能を実現しているんですが

そのcontenteditable時の挙動がそうはなっていなかったんです

しかし、実際使っていくと、p要素がBSで消えるのは非常に使い難い

ま、個人的にですけど

そこで今回思い切って仕様を変更してみました

ですが、簡単かと思ったんですがこれが非常に面倒

しかもChromeについては思ったように変更できませんでした

その時のメモを

まず、BSキーを押した時の挙動の修正から

BSキー（８）が押された時のkeydownイベントを書き換えます

全てのイベントを抑えるのではなく、行頭と１文字目の場合だけ変更します

Rangeオブジェクトを引っ張ってきて

var r = ot.tryitEditor.__getRange();

条件を判断し

if (r.endOffset <= 1 && r.startOffset <= 1) 

更に、p要素だということを確認し

if ((r.startContainer.tagName == 'P' || r.startContainer.parentNode.tagName == 'P')) 

であれば、デフォルトのイベントをキャンセルする、と

面倒なのが、先頭位置だとキャンセルだけでいいんですが、一文字目だと自力でけして上げた後、BRタグを入れないとP要素の高さが０になっちゃう

めんどう(- -#)

そして、できたと思ったら珍しくChrome地獄に陥ったのです

IE地獄はよくあるんですけどね（笑

で、どこがハマったかというと、ChromeはPの行頭でDELキーを押した時の挙動がおかしい事に気が付き

そこはエージェントを見て事なきを得たんですが、Chromeの場合、IMEの変換途中の挙動がとってもおかしい

keydwonイベントでは全てevent.keyCode == 229となり、BSキーが取れない

Keyupイベントでは取れるんですが、その時点ではすでにドキュメントが修正されているので、もとに戻すのが非常に面倒というか、バグの温床になるので実際にはやれない

というわけで、Chromeの場合だけ

Pの先頭で変換途中にESCとかBSを押すと従来どおりのおかしい動きになっちゃう

諦めざるを得ませんでした

ホント、WYSIWYGエディタの場合、ブラウザ間の挙動を合わせるのが非常に難しいですねぇ