Как вы обновляете контент в ckeditor5 из ответа ajax

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...) - так что это просто ванильное текстовое поле, содержимое заполнено правильно.

Так как мне получить содержимое в редакторе таким образом?

Answer 1

Посмотрите на документацию .

Вы должны позвонить editor.setData(…);.

У вас есть editor, определенное здесь:

.then( editor => {

… поэтому, чтобы сохранить эту переменную в области видимости, вам необходимо:

• Переместить весь раздел инициализации редактора в ваш обратный вызов Ajax (заменив $('#editor').html(response.comment))
• Переместите весь код вызова Ajax в этот then обратный вызов
• Оберните оба обещания в Promise.all и выведите редактор и данные в получившийся массив.

Обратите внимание, этоне является живой демонстрацией, потому что песочница Stackoverflow несовместима с попыткой CKEditor использовать куки, что приводит к исключению.

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