CKEditor文本域内容无法通过Ajax jQuery提交问题求助

问题核心在于CKEditor初始化后会替换原<textarea>元素，FormData默认只会读取原textarea的初始值，不会自动同步编辑器的实时内容。下面是两种可行的解决方法：

方法一：提交前同步编辑器内容到原textarea #

先保存编辑器实例，在表单提交时调用updateElement()方法将编辑器内容同步回原textarea，确保FormData能正确获取到内容：

修改你的JS代码：

$(document).ready(function() {
    // 声明变量保存编辑器实例
    let productEditor;
    
    ClassicEditor.create( document.querySelector("#product-details"), {
        toolbar: {
            items: [
                "heading", "|",
                "alignment", "|",
                "bold", "italic", "strikethrough", "underline", "subscript", "superscript", "|",
                "link", "|",
                "bulletedList", "numberedList", "todoList",
                "-", // break point
                "fontfamily", "fontsize", "fontColor", "fontBackgroundColor", "|",
                "code", "codeBlock", "|",
                "insertTable", "|",
                "outdent", "indent", "|",
                "uploadImage", "blockQuote", "|",
                "undo", "redo"
            ],
            shouldNotGroupWhenFull: false
        }
    }).then(newEditor => {
        // 保存编辑器实例
        productEditor = newEditor;
    });

    $("#submitForm").on('submit', function(e) {
        e.preventDefault();
        
        // 关键：同步编辑器内容到原textarea
        productEditor.updateElement();
        
        $.ajax({
            type: 'POST',
            url: 'ajax/create-product.php',
            data: new FormData(this),
            dataType: 'json',
            contentType: false,
            cache: false,
            processData: false,
            beforeSend: function() {
                $("#publish").prop("disabled", true);
            },
            success: function(response) {                
                if (response.status == '1') {
                    toastr["success"](response.message, "")
                    window.location.href = response.url;
                } else {
                    $("#publish").prop("disabled", false);
                    toastr["error"](response.message, "")
                }
            }
        });
    });   
});

方法二：直接将编辑器内容添加到FormData #

如果不想依赖原textarea，可以直接获取编辑器内容并手动添加到FormData中：

修改submit事件部分的代码：

$("#submitForm").on('submit', function(e) {
    e.preventDefault();
    
    let formData = new FormData(this);
    // 直接将编辑器内容添加到FormData
    formData.set('details', productEditor.getData());
    
    $.ajax({
        type: 'POST',
        url: 'ajax/create-product.php',
        data: formData, // 使用修改后的FormData
        dataType: 'json',
        contentType: false,
        cache: false,
        processData: false,
        beforeSend: function() {
            $("#publish").prop("disabled", true);
        },
        success: function(response) {                
            if (response.status == '1') {
                toastr["success"](response.message, "")
                window.location.href = response.url;
            } else {
                $("#publish").prop("disabled", false);
                toastr["error"](response.message, "")
            }
        }
    });
});

原代码失效原因 #

CKEditor初始化时会隐藏目标textarea，生成独立的富文本编辑DOM结构，原textarea的内容不会自动同步为编辑器的实时内容。当你用new FormData(this)时，只会读取原textarea的初始空值，导致后端无法获取到编辑器内容。

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