使用jQuery清空CKEditor5文本域时出现CKEDITOR未定义错误

云上老周

2026-6-28

问题原因及解决方案

报错的核心原因是你混淆了CKEditor 4和CKEditor 5的API：

CKEditor 4会暴露全局的CKEDITOR对象，通过CKEDITOR.instances获取编辑器实例；
但你用的是CKEditor 5的ClassicEditor，它没有全局CKEDITOR对象，而是通过create方法返回的实例来操作。

你的代码里已经在初始化时把实例存在了theEditor变量里，但这个变量是$(document).ready内部的局部变量，AJAX的回调函数访问不到它，同时你还错误调用了CKEditor 4的API，所以才会报错。

修复步骤

1. 调整编辑器实例的作用域

把theEditor变量提升到全局作用域，确保AJAX回调能访问到：

// 把变量放到ready函数外部，变成全局变量
let theEditor;

$(document).ready(function() {
    ClassicEditor.create( document.querySelector( '#bookDesc' ),
    {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote','|',
                'undo', 'redo',]
    })
    .then(editor => {
        theEditor = editor;
    })
    .catch( error => {
        console.error( error );
    });
});

2. 修改AJAX回调的清空代码

用CKEditor 5的API来清空内容，同时加判断避免编辑器未初始化时调用报错：

$.ajax({
        url: 'create-book',
        method: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        success: function(response) {
           // 先判断实例是否存在，防止编辑器未加载完成时执行报错
           if (theEditor) {
               theEditor.setData('');
           }
        }
  });