OneThird CMSで使用しているWYSIWYGエディタtryitEditorをバージョンアップしてみました
http://onethird.net/tryitEditor/
今回の修正は、BS(back space)キーを押した時、p要素の先頭まで行くと、そのp要素が消えていた仕様を変更し、BS動作をキャンセルするようにしました
tryitEditorではcontenteditable=trueをつかて編集機能を実現しているんですが
そのcontenteditable時の挙動がそうはなっていなかったんです
しかし、実際使っていくと、p要素がBSで消えるのは非常に使い難い
ま、個人的にですけど
そこで今回思い切って仕様を変更してみました
ですが、簡単かと思ったんですがこれが非常に面倒
しかもChromeについては思ったように変更できませんでした
その時のメモを
まず、BSキーを押した時の挙動の修正から
BSキー(8)が押された時のkeydownイベントを書き換えます
全てのイベントを抑えるのではなく、行頭と1文字目の場合だけ変更します
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要素の高さが0になっちゃう
めんどう(- -#)
そして、できたと思ったら珍しくChrome地獄に陥ったのです
IE地獄はよくあるんですけどね(笑
で、どこがハマったかというと、ChromeはPの行頭でDELキーを押した時の挙動がおかしい事に気が付き
そこはエージェントを見て事なきを得たんですが、Chromeの場合、IMEの変換途中の挙動がとってもおかしい
keydwonイベントでは全てevent.keyCode == 229となり、BSキーが取れない
Keyupイベントでは取れるんですが、その時点ではすでにドキュメントが修正されているので、もとに戻すのが非常に面倒というか、バグの温床になるので実際にはやれない
というわけで、Chromeの場合だけ
Pの先頭で変換途中にESCとかBSを押すと従来どおりのおかしい動きになっちゃう
諦めざるを得ませんでした
ホント、WYSIWYGエディタの場合、ブラウザ間の挙動を合わせるのが非常に難しいですねぇ