Question

ckeditor 5，v1.11.1

我已经初始化了如下编辑器：

<textarea name="content" id="editor"></textarea>

<script>
ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );
</script>

我正在进行ajax调用（通过jquery），并尝试使用响应填充编辑器：

<script>
    $(function() { 
        $.ajax({
            url: '/get-editor-data',
            method: 'get'
        }).done(function (response) {
            $('#editor').html(response.comment);
        });
    });
</script>

ajax请求成功运行并返回有效的JSON：

{"comment":"foo"}

因此，内容“ foo”应该出现在编辑器中。

但是我正在得到一个没有任何内容的编辑器。

如果我禁用ckeditor（通过注释掉js的第一块（ClassicEditor...），则它只是一个普通的textarea，则内容将正确填充。

那么我如何以这种方式在编辑器中获取内容？

Answer 1

看看the documentation。

您必须致电editor.setData(…);。

您在此处定义了editor：

.then( editor => {

...因此，要将变量保留在范围内，您需要执行以下操作之一：

将整个编辑器初始化部分移至您的Ajax回调中（替换$('#editor').html(response.comment)）
将整个Ajax调用代码移至该then回调中
将两个promise都包装在Promise.all中，并在结果数组中获取编辑器和数据。

注意，这不是实时演示，因为Stackoverflow的沙箱与CKEditor尝试使用Cookie导致异常的尝试不兼容。

function init_editor() {
  console.log(1);
  return ClassicEditor
    .create(document.querySelector("#editor"));
}

function get_data() {
  console.log(2);
  return $.ajax({
    url: "https://cors-anywhere.herokuapp.com/https://stackoverflow.com/humans.txt",
    method: "get"
  });
}

$(function() {
  var promises = [init_editor(), get_data()];
  Promise.all(promises).then(function(results) {
    results[0].setData(results[1]);
  });
});

如何从Ajax响应更新ckeditor5中的内容

1 个答案: