2

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

我使用 AJAX 发布表单字段并从我的后端接收数据，我想将这些数据添加到字段中。

在我的 html 头中，我有 CKEditor5 内联编辑器 CDN，然后是引导程序，然后链接到 style.css。在我的 body 标签之前，我有 Jquery CDN，然后是 script.js 的链接

编辑器.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 is not defined

4

1 回答 1

1

基本 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 );
        }
    })
});
于 2018-01-22T15:09:17.057 回答