Question

我想使用AJAX调用（通过jQuery）在CKEditor小部件的upcast功能期间更改小部件的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;
      },
    });
  }
});

首次实例化小部件时，正如预期的那样，它会显示：

＆＃34;初始文本。＆＃34;

点击＆＃34;来源＆＃34;然后点击＆＃34; Source＆＃34;再次，正如预期的那样，案文已改为：

＆＃34;向上转播＆＃34;

但是，当AJAX请求返回时，文本不会更改为＆＃34;在AJAX＆＃34;之后更新文本。

有谁知道我如何从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;
            },
        });
    }
});

在Ckeditor小部件的upcast函数

1 个答案: