ChromeでCKEditorが動作しない問題 のコメント投稿

ChromeでCKEditorが動作しない問題 のコメント投稿を行います
ページ下部のフォーム にコメント情報を入力してください

当サイトはログ編集機能に CKEditor を使用しております
先日、某氏からの報告によりGoogle Chromeだと当サイトのログ編集機能が動作していないことが判明しました。ご迷惑をおかけします

原因は?

通常、CKEditorを適用させるdivタグには contentEditable="true" という属性を設定しますが、Chromeの一部のVerの場合だとなぜか適用後に contentEditable="false" となっていました

解決法について

自分が調べた中では こちら の公式フォーラム記事が最もフィットしている感じでした

方法1(失敗)

$(this).attr('contenteditable', true);
CKEDITOR.inline(this);

this はCKEditorを適応先のHTML要素です
こちらは単純明快ですね。CKEditorの適応直前に true を設定しています
…ですが、当サイトではこの方法ではうまく動作しませんでした。true 設定を後に行っても状況は好転せず

方法2(成功!)

var ck = CKEDITOR.inline(element);
ck.on('instanceReady', function(ev) {
    var editor = ev.editor;
    editor.setReadOnly(false);
});

こちらの方法がベストですね。CKEDITORに instanceReady というイベントがあるらしく、CKEditorのインスタンスが作成されたときに発生するイベントのようです

で、そのときに setReadOnly というメソッドで読み取り専用状態を解除しているようです
このあたりはドキュメントを詳しく読んでないとなかなか分からないですねぇ…

今のところこの方法で問題なく動作しております。ありがとう公式フォーラム

CKEDITOR.inline(element).on('instanceReady', function(ev) {
    ev.editor.setReadOnly(false);
});

短縮して上記のように書いても問題ないようですね

追記

CKEditorが使用できない環境(例:スマートフォン)だと CKEDITOR.inline(element) の返り値が null になってしまうっぽいです
当然コンパイルエラーになり、以降のコードが動作しなくなります

なので、下記のように書くのが正解…だと思います

var editor = CKEDITOR.inline(element);
editor && editor.on('instanceReady', function(ev) {
    ev.editor.setReadOnly(false);
});

2件のコメント

まさしくコレに引っかかっておりましたw
なので、火狐でアクセスしていたり…

http://blogos.com/article/112432/
この番組みたかったなぁ…

まだ、職場です。そろそろ帰ろうかな…

>http://blogos.com/article/112432/

なかなか考えさせられる内容ですね
スペシャリストです。とはなかなか言えないですよね。自分より凄い人なんて腐るほどいますし

>退職してから再就職先を探してる

これも耳が痛い。いつか就職できるなんて保証はありません
可能なら就業しつつ次の職を探すべきです。面接などの日程調整は大変ですが…

※必須入力です。32文字以内のテキストを入力してください
プレビュー
※エディタでHTMLが入力できます(一部の端末ではHTMLエディタが使用できません) ※エディタ内の表示内容は実際のものとは異なります。実際の表示内容はプレビューボタンからプレビューできます ※必須入力です。4000文字以内のテキストを入力してください ※その他の入力内容のルールは こちら で確認できます ※画像は以下のフォームからアップロードできます
画像アップロードフォームを表示
※JPEG、PNG、GIF形式の4MBまでの画像がアップロードできます ※ドラッグ&ドロップでもアップロードできます
アップロード
削除
アップロード画像01
画像をドロップ
アップロード
削除
アップロード画像02
画像をドロップ
アップロード
削除
アップロード画像03
画像をドロップ
アップロード
削除
アップロード画像04
画像をドロップ
アップロード
削除
アップロード画像05
画像をドロップ
アップロード
削除
アップロード画像06
画像をドロップ
アップロード
削除
アップロード画像07
画像をドロップ
アップロード
削除
アップロード画像08
画像をドロップ
認証画像の再読込
※必須入力です。全角ひらがなで構成される4文字のテキストを入力してください ※判読しにくい場合は再読み込みしてください