使用CKEditor5在线编辑器AJAX回调时提示CKEDITOR未定义

你遇到的问题核心是CKEditor5和CKEditor4的API完全不兼容，你写的CKEDITOR.instances['description']是CKEditor4的写法，而你用的是CKEditor5的Inline Build，自然会报CKEDITOR未定义的错误。另外你的代码里还有个小问题：表单元素的选择器漏了#，会导致获取不到表单值，我一起帮你修正。

步骤1：正确初始化CKEditor5 Inline Editor并保存实例 #

CKEditor5需要通过InlineEditor.create()方法初始化，并且要保存返回的编辑器实例，后续才能调用它的方法。修改你的script.js，先完成编辑器初始化：

// 全局保存编辑器实例，方便后续调用
let descriptionEditor;

// 初始化Inline Editor
$(document).ready(function() {
    InlineEditor.create(document.getElementById('description'))
        .then(editor => {
            descriptionEditor = editor;
            console.log('编辑器初始化成功');
        })
        .catch(error => {
            console.error('编辑器初始化失败:', error);
        });
});

步骤2：修正AJAX代码中的选择器和数据填充逻辑 #

原来的表单元素选择器$("reportType")缺少#（id选择器必须加#），同时把CKEDITOR.instances的写法换成保存的编辑器实例调用setData()：

$("#selection").submit(function (e) {
    e.preventDefault();
    // 修正选择器：添加#，确保能获取到表单值
    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) {
            var trait_description = data.trait_description;
            // 确保编辑器实例已初始化，再填充数据
            if (descriptionEditor) {
                descriptionEditor.setData(trait_description);
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX请求失败:', error);
        }
    })
});

补充注意事项 #

• 确保你引入的CKEditor5 CDN是Inline Editor的版本，比如：

  <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/inline/ckeditor.js"></script>
  

• 所有JS代码最好放在$(document).ready()中，或者放在页面底部（</body>标签前），确保DOM元素加载完成后再执行初始化逻辑。

这样就能解决你的错误，成功从后端获取数据并填充到CKEditor5编辑器中了。

内容的提问来源于stack exchange，提问作者Evenstar