CLEditor でペーストを強制的にテキストにしてリサイズでの入力内容消失現象を回避

CLEditor のバグ

ヴィジュアルな編集ができる jQueryプラグインのWYSIWYGエディタ CLEditor は開発がすでに止まって久しいもののライセンスが比較的緩い関係でまだ使われていると思います。

有名なバグとして、「ブラウザをリサイズすると入力内容が消える」という現象があります。最近もこのケースで悩まされましたが、一応解決方法がわかりました。

発生するタイミング

この致命的なバグが発生するタイミングは、大抵のケースで、Word などから文章を貼り付けたときです。Word の書式が（たとえ複雑ではなくても）HTML タグとして貼り付けられ、それ以降に発生するようになります。テキストを手入力した場合は発生しません。

なお、CLEditor にはクリップボートの内容をテキストとして貼り付ける「Paste as Text」のボタンを表示する機能はありますが、それだけでは利用者が Ctrl + V などのキーボードショートカットやマウスの右クリックメニューから貼り付けることは防げません。

CLEditor を改造して対応

キーボードショートカットを使ったコピペの時でも、強制的にテキストとして貼りつけることができればこのリサイズ問題を回避できます。もちろん書式は失われますが、そもそも想定外の Word の書式はいったんクリアして書式を付け直す方が色々とトラブルは少ないです。

ただし CLEditor の設定では実現できず、ソースを修正する必要があります。すでに開発が止まっているので今回は最終版の 1.4.5 のソースを直接書き換えることで対応しました。

jquery.cleditor.js の 934行目付近、$doc.click(hidePopups)... の次のブロックに以下のコードを挿入します。

これで Firefox や Chrome ではテキストでペーストできるようになりました。そして、リサイズしても入力内容が消える現象も発生しなくなりました。

このコードは一応 IE でも動作するようですが完全には確認していません。実運用面も含めた対応の検討が必要と思います。

ITエンジニア募集中！

キュアコード株式会社はITエンジニアを募集しております。少人数の職場なので、上流・下流やサーバー・クライアント対応の垣根なく、あなたの強みを活かしながら いろいろなことにチャレンジ可能です。エンジニアとしての未経験の方、経験が少ない方も歓迎しています。

下記よりITエンジニア募集の採用情報をご覧いただけます。