当サイトはログ編集機能に 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件のコメント
#01
megane
まさしくコレに引っかかっておりましたｗ
なので、火狐でアクセスしていたり…
http://blogos.com/article/112432/
この番組みたかったなぁ…
まだ、職場です。そろそろ帰ろうかな…
#02
管理人
>http://blogos.com/article/112432/
なかなか考えさせられる内容ですね
スペシャリストです。とはなかなか言えないですよね。自分より凄い人なんて腐るほどいますし
>退職してから再就職先を探してる
これも耳が痛い。いつか就職できるなんて保証はありません
可能なら就業しつつ次の職を探すべきです。面接などの日程調整は大変ですが…