AJAX 在 Ckeditor 小部件的 upcast 函数中调用

Question

我想使用 AJAX 调用（通过 jQuery）在 CKEditor 小部件的向上转换函数期间更改小部件的 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;
      },
    });
  }
});

当小部件第一次实例化时，如预期的那样，它说：

"Initial text."

我点了"Source"，然后又点了"Source"，果然又如我所料，文字变成了：

"After upcasting"

但是，当 AJAX 请求返回时，文本不会更改为 "Updated text after 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;
            },
        });
    }
});

AJAX 在 Ckeditor 小部件的 upcast 函数中调用

AJAX call inside Ckeditor widget's upcast function

ajax

ckeditor

ckeditor4.x