当我从 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 );
}
})
});
我正在使用 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 );
}
})
});