Ckeditorウィジェットのアップキャスト機能内でAJAXコールを呼び出す

Question

CKEditorウィジェットのアップキャスト機能中にウィジェットのHTMLを変更するために、（jQuery経由で）AJAX呼び出しを使用したいと思います。

ウィジェットが最初にインスタンス化され

CKEDITOR.plugins.add('mywidget', { 
    requires: 'widget', 
    icons: 'mywidget', 
    init: function (editor) { 
    editor.widgets.add('mywidget', { 
     button: 'My widget', 
     template: '<p class="mywidget">Initial text.</p>', 
     allowedContent: 'p(!mywidget)', 
     upcast: function (element) { 
     if (element.hasClass('mywidget')) { 
      element.setHtml('After upcasting.'); 
      $.get('http://example.com') 
      .done(function (response) { 
       element.setHtml('Updated text after AJAX.'); 
      }); 
      return true; 
     } 
     return false; 
     }, 
    }); 
    } 
}); 

、予想通り、それは言う：ここで私が試したものである「初期テキスト」

私は「ソース」をクリックし、再度「ソース」をクリックし、再び予想通り、テキストに変更した後：AJAX要求が戻ってきたときに、しかし

を「アップキャストした後、」

、テキストは「AJAXの後に更新されたテキスト」に変更されません。

誰かがAJAXコールバックの中から要素を取得する方法を知っていますか？ AJAXコールバックから要素にアクセスするのが遅すぎる場合、コールバックからの応答を使用して、すでにキャストされているウィジェットのマークアップを遡及的に編集する方法はありますか？ありがとうございました！

Answer 1

$.get()は非同期なので、アップキャストがすでに完了した後に.done部分が呼び出されます。代わりに$.ajax()を使用し、async: falseを設定してください。

修正ウィジェットコード：

CKEDITOR.plugins.add('mywidget', { 
    requires: 'widget', 
    icons: 'mywidget', 
    init: function (editor) { 
     editor.widgets.add('mywidget', { 
      button: 'My widget', 
      template: '<p class="mywidget">Initial text.</p>', 
      allowedContent: 'p(!mywidget)', 
      upcast: function (element) { 
       if (element.hasClass('mywidget')) { 
        element.setHtml('After upcasting.'); 
        $.ajax({ 
         url: 'http://www.example.com', 
         async: false, 
         success: function (result) { 
          element.setHtml('Updated text after AJAX.'); 
         } 
        }); 
        return true; 
       } 
       return false; 
      }, 
     }); 
    } 
});