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

2019年03月22日
JQuery
CLEditor, jQuery

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)... の次のブロックに以下のコードを挿入します。


        // Force paste as text.
        $doc.bind("paste", function(e) {
            e.preventDefault();
            var text = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text').replace(/\n/g, "<br />");
            if (text !== "") {
                execCommand(editor, 'inserthtml', text, null);
                focus(editor);
            }
            return false;
        });

// Force paste as text.

$doc.bind("paste", function(e) {

e.preventDefault();

var text = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text').replace(/\n/g, "<br />");

if (text !== "") {

execCommand(editor, 'inserthtml', text, null);

focus(editor);

}

return false;

});

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

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

wp-cli を入れると rkhunter で RH-Sharpe’s Rootkit が検出される Ansible で “Could not detect which major revision of yum is in use, which is required to determine module backend.” エラーが発生する