無料ブログ「rentafree.net」の管理人ブログ

Operaの改行処理を修正しました

ブログエディターの改行処理ですが、
ブラウザに任せると<br>ではなく<p>や<div>を挿入されてしまうため独自処理で<br>を挿入していますが、
Operaではrangeを<br>に置換してもキャレットが移動できないという問題があったため処理を回避してブラウザに任せていたため、<p>が挿入されていましたが、
なんか直っているようなんで、他のブラウザと同じ様に<br>を挿入するようにしました。

ただし、他ブラウザでは<br>の後ろに改行コードを挿入してソースモードで修正しやすいようにしていますが、
Operaで改行コードを挿入すると改行コードの後ろに文字を入力した場合に改行コードが&nbsp;に変換されてしまうようなので、
改行コードの挿入はしないで空のテキストノードを挿入するようにしています。


Operaの更新履歴にそれらしい変更が見当たらないのですが、
古いバージョンでは問題があるかもしれません。
現行最新バージョンの12.12では問題ないようです。

改行処理の不具合を解消しました

ブログエディターでEnterを押すと<br>を挿入しますが、
ブロック要素等の親要素の末尾に<br>を挿入する場合は<br>を2個入れないと次の行が有効にならないので、親要素末尾に<br>を挿入する処理を入れていましたが、
末尾でEnterされたかの判別ができなかったので、親要素末尾がテキストノードの場合は末尾に<br>を挿入するという処理にしていました。

この方法ではEnterした場所以外でも<br>が挿入されてしまう可能性があり、
こちらでも編集の際に問題が生じる場合があることに気づいていたので修正を試みていたのですが、
末尾でEnterされたかの判別に成功したので、末尾でEnterされた場合のみ<br>を挿入するように修正できました。


Firefox用の新エディターのみに修正を行いましたが、同じ処理が旧エディターにも入っているので、
引き続きFirefox以外(IE8以下及びOperaは置換処理非対応なので元々この処理はありません)では問題が生じるのですが、
旧エディターの方は、こちらで日常的に確認できないので、別の問題が生じると困るので同様の修正入れないことにします。

Firefox以外の新エディター対応は、他ブラウザがHTML5<menu>タグに対応しないとどうにもならないので今のところ無理です。


[追記]
旧エディターに修正を入れなくても他ブラウザが新エディターに移行したら新しい改行処理に移行しますし、
未修正の改行処理で不具合報告されても困るので、
旧エディターの方にも同様の修正を入れることにしました。
IEに関しては空のブロック要素でも1行となるようで、末尾<br>1個でも末尾行が有効になる様なので処理を除外しました。
また、IEはテキストノードに改行コードを入れることができなかったので改行コードの挿入処理を除外していましたが、
バージョン変わらずにこっそりアップデートが入っていたようで、有効になっていたので改行コード挿入処理の共通化を行いました。
アップデートしていないIE9の場合は問題が生じる可能性があります。