ワイズリマインダー

CKEditorの内容を書き換える時に失敗する事がある場合の対処法

基本的にtextareaにデータを放り込んでからreplaceすれば問題なくCKEditorが有効になります。

// まずHTMLに値を代入する
$('#hoge').val('代入する文字列');
// それからWYSIWYG化する
CKEDITOR.replace('hoge');

CKEditorが有効になった後にJavaScriptでデータを書き換えたい時はsetDataを使うと書き換えることが可能です。
→ CKEditorの内容をJavaScriptから変更する

ただ、CKEditorが有効になるのとほぼ同時にデータを書き換えようとすると失敗する場合があります。
そういう時はinstanceReadyを使う事で回避する事が出来ます。
→ CKEditorの初期値が反映されない場合があるときの対処法

今回、非同期にデータを取得した後、CKEditorの内容を書き換えようとするとこれらでは対応できません。
Promiseを使うのも手ですが、今回は非同期にデータを取得した後
CKEditorの準備がまだの場合、ウェイトを入れ処理を待たせるようにしました。

let loop = function(i){
  if(CKEDITOR['instances']['htmlCkeditor'].status == "ready"){
    CKEDITOR['instances']['htmlCkeditor'].setData(html);
    return;
  };
  if(i >= 100) return;
  setTimeout(function(){ loop( i + 1) }, 10);
};
loop(0);

一応、無限ループ対策として100で処理を強制終了させています。

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。