JavaScript製WYSIWYGエディタと改行の問題

JavaScript

designMode="on"での時、データ次第でEnterキー押下時の動作が変わることを知らなかったせいで起こった、HTMLエディタ導入時の失敗談。

  • 当初の要求はこれだけ
    • ボタンで<img>タグを入力できる
    • ボタンで<a>タグを入力できる

自分で実装しようと思ったが後から他にも出てきそうだったので軽めのWYSIWYGエディタを探すことに。

時間もないので簡単に入りそうなものから試していくことに。

試したもの

jWYSIWYG

https://github.com/akzhan/jwysiwyg
jQueryプラグイン。jQueryUIなしでも動くがあれば入力ウィンドウ等がリッチに。ただ試したらそのUIありのとき画像入力できなくなったので導入断念。

nicEdit

http://nicedit.com/
単体で動作。ライブラリのサイズも小さい。表示するボタンのカスタマイズも簡単。なんと日本語版があるらしい。ということでこれは試さず日本語版へ。

nicEdit日本語版

http://cmonos.jp/blog/2010010800/1.shtml
日本語版独自の拡張が行われている。目を引いたのが「改行をタグに変換する textarea での使用を想定した「convertToText(true/false)」オプションを・・・」。
通常のエディタだとユーザーの入力した改行は<br>として渡されるが、この拡張のおかげで改行が改行のまま渡される。ちょうど対象のシステムが改行を改行のままDBに保存して出力時<br>タグに変換する仕組みだったのですごく渡りに船。
※これが後々問題に・・・

導入後

HTMLエディタ以外のところでIE,Chromeでの操作性が著しく悪いバグがあったため利用者のブラウザがfirefoxに統一された。うれしい誤算（ぉぃ
ということで以下はfirefoxに限定した話。

最初はまったく問題なく進んでいたもののある時から「無駄な空白行がはいってしまう」との声が上がるように。
どうもユーザーの改行入力に対して<p>タグが挿入され、それが改行2つになって送信されてる模様。

    • 入力エリアに何も無いときはEnter=<br>
    • 改行が2つ以上続くデータの場合エディタでは<p>となる
    • <p>のあるデータの場合Enter=<p>
    • この時<br>を入力したければShift+Enter

恥ずかしながらdesignMode="on"というのをこの時初めて知った・・・

    • 改行2つを<p>にしているのはnicEdit_ja.jsのconvertToTextモード
    • Enterで<p>が入るのはブラウザのdesignModeの仕様
    • <p>を改行2つにしているのはnicEdit_ja.jsのconvertToTextモード

つまり

データ次第でEnterキー押下時の動作が変わるdesignMode="on"に注意、ということでした。
ちなみにちょっとTinyMCEを見たら、最初が空データでも入力時勝手に<p>が挿入されてEnter押下の挙動が統一されるようになってた。さすが全然tinyじゃないだけあってしっかりしてるわ・・・