当我从 AJAX 调用中获取返回数据时,未定义 CKEDITOR

CKEDITOR is not defined when I get returned data from my AJAX call

我正在使用 CKeditor5 的内联编辑器构建。

我已经使用 AJAX 到 post 表单字段并从我的后端接收数据,我想将其添加到字段中。

在我的 html 头上,我有 CKEditor5 内联编辑器 CDN,然后是 bootstrap,然后是 link 到 style.css。 在我的 body 标签之前,我有 Jquery CDN,然后是 link 到 script.js

editor.php

<p class='description box' id="description"> {add text from database} </p>

我的 javascript 文件和特定的 ajax 调用:

$("#selection").submit(function (e) {
    e.preventDefault();

    // get the values of the form
    var chosenType = $(".reportType").val();
    var chosenTrait = $(".trait").val();
    var chosenAssess = $(".assessment").val();

    $.ajax({
        type: "POST",
        url: "show.php",
        dataType: 'json',
        data: {chosenType: chosenType, chosenTrait: chosenTrait, chosenAssess: chosenAssess},
        success: function (data) {

            // fill in description
            var trait_description = data.trait_description;
            CKEDITOR.instances['description'].setData(trait_description);
        }
    })
});

但是我在我的控制台中得到了这个: script.js:82 Uncaught ReferenceError: CKEDITOR 未定义

basic API 文章中描述了与编辑器(对于 CKEditor 5)交互的方式。

编辑器的实例不再通过 CKEDITOR 全局可用。那个全局根本不存在。

您只能通过 create() 方法返回的 promise 获取编辑器的实例,如下所示:

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

然后,您可以将其存储在您的应用程序中。出于本示例的目的,我将使用一个全局变量:

let appEditor;

ClassicEditor
    .create( document.querySelector( '#description' ) )
    .then( editor => {
        // Store it in more "global" context.
        appEditor = editor;
    } )
    .catch( error => {
        console.error( error );
    } );

$("#selection").submit(function (e) {
    e.preventDefault();

    // get the values of the form
    var chosenType = $(".reportType").val();
    var chosenTrait = $(".trait").val();
    var chosenAssess = $(".assessment").val();

    $.ajax({
        type: "POST",
        url: "show.php",
        dataType: 'json',
        data: {chosenType: chosenType, chosenTrait: chosenTrait, chosenAssess: chosenAssess},
        success: function (data) {

            // fill in description
            var trait_description = data.trait_description;
            appEditor.setData( trait_description );
        }
    })
});