代码之家 › 专栏 › 技术社区 › Evenstar

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

ckeditor5 ajax jquery

2

Evenstar · 技术社区 · 7 年前

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

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

在我的html头脑中,我有CKEditor5内联编辑器CDN,然后是引导,然后是指向样式的链接。css。在body标记之前,我有Jquery CDN,后面是指向脚本的链接。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);
        }
    })
});

然而,我在控制台中得到了以下信息: 剧本js:82未捕获引用错误:未定义CKEDITOR

1 回复 | 直到 7 年前

1

Reinmar 7 年前

中描述了如何与编辑器交互(对于CKEditor 5) basic API 文章

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

您只能通过从 create() 方法,如下所示:

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