Safari の WYSIWYG モードで Shift-Enter が効かないのに対処する
tracwysiwyg を Safari から使っていて気付いたのですが、Safari の WYSIWYG モードでは Shift-Enter を入力しても改行(<br>)が入りません。これ自体は Safari のバグの模様。
Bug 16973 - Shift+Return doesn't produce BR elements in a contentEditable area.
じゃあ…と思って、ツールバーの一番右にある改行挿入するアイコンで入れようとしたら、これも挙動がおかしい。生成されている html を見ると ↓ みたいなのが生成されていた。
<p>first</p> <br> <p></p>
Safari で contentDocument.execCommand('inserthtml', false, '<br>')
を実行すると paragraph を2つに分離してしまうようです。
全然期待通りに動かないので困ったな…と思いながら webkit.org でソースを眺めていたら inserthtml の近くに insertlinebreak というコマンドがあるのを発見(/trunk/WebCore/editing/EditorCommand.cpp @ 34682 - WebKit - Trac)。そのまま使えそうなので keypress イベントで Shift-Enter をハンドリングして insertlinebreak を実行するように変更したところ、無事に <br> が入るようになりました。
TracWysiwyg.prototype.execCommand = function(name, arg) { return this.contentDocument.execCommand(name, false, arg); }; TracWysiwyg.prototype.insertLineBreak = function() { this.execCommand("insertlinebreak"); };
Safari で WYSIWYG を使う場合、このバグを回避するために自前で insertlinebreak を呼ぶようにしたほうがよさそうです。
これを踏まえて tracwysiwyg を修正、Changeset 4135 - Trac Hacks - Plugins Macros etc. - Trac になりました。ツールバーの改行アイコンからも insertlinebreak を呼ぶように修正しています。