Ckeditor小部件的上传功能中的AJAX调用

Question

我想在CKEditor小部件的upcast函数中使用AJAX调用（通过jQuery）来更改小部件的HTML。这是我曾尝试：

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; 
      }, 
     }); 
    } 
});