如何在Laravel 8中通过Ajax响应向CKEditor填充数据

当textarea被CKEditor接管后，原生的val()方法无法修改编辑器内容，必须使用CKEditor官方API来操作。以下是具体解决方案：

核心修改 #

直接替换你代码中被注释的那行，使用CKEditor的setData()方法设置内容：

// 替换原有注释的val()写法
CKEditor.instances.edit_support_ticket_desc.setData(res.support_ticket_desc);

修改后的完整success回调代码：

success: function(res) {
    console.log(res);
    $('#ajaxModelTitle').html("Edit");
    $('#edit-modal').modal('show');
    $('#id').val(res.id);
    $('#edit_support_ticket_department_id').val(res.support_ticket_department_id);
    $('#edit_support_ticket_employee_id').val(res.support_ticket_employee_id);
    $('#support_ticket_priority').val(res.support_ticket_priority);
    $('#support_ticket_subject').val(res.support_ticket_subject);
    $('#support_ticket_note').val(res.support_ticket_note);
    $('#support_ticket_date').val(res.support_ticket_date);
    // 使用CKEditor API填充内容
    CKEditor.instances.edit_support_ticket_desc.setData(res.support_ticket_desc);
    $('#support_ticket_status').val(res.support_ticket_status);
}

额外注意事项 #

1. 确保编辑器实例存在：如果你的CKEditor是在模态框弹出后才初始化的，需要在模态框的shown.bs.modal事件中完成编辑器初始化，避免实例未创建导致报错：

$('#edit-modal').on('shown.bs.modal', function () {
    // 初始化CKEditor
    CKEditor.replace('edit_support_ticket_desc');
});

2. CKEditor 5适配：如果你使用的是CKEditor 5，API略有不同，需要提前保存编辑器实例引用：

// 初始化时保存实例
let descEditor;
ClassicEditor
    .create(document.querySelector('#edit_support_ticket_desc'))
    .then(editor => {
        descEditor = editor;
    })
    .catch(err => console.error(err));

// Ajax回调中使用
descEditor.setData(res.support_ticket_desc);

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