CKeditor编辑笔记首次保存异常：P标签返回旧值而非更新值

问题核心在于获取CKEditor内容的方式错误：你直接从DOM的<p>标签读取HTML，但CKEditor在编辑过程中，实际内容是由编辑器实例内部维护的，首次编辑后DOM并未同步更新最新内容，导致首次保存时发送的是旧值；第二次保存时页面已重新加载，DOM同步了更新后的数据，所以能取到正确值。

修改前端代码，通过CKEditor实例的getData()方法获取最新编辑内容，而非直接读取DOM元素的HTML，同时优化AJAX回调逻辑避免数据不一致。

1. 修正saveDes函数 #

替换获取内容的逻辑，从编辑器实例读取最新内容：

function saveDes(hoverId) {
    debugger;
    $("#" + hoverId).removeClass('col-md-8');
    $("#" + hoverId).find('#dot').css('display', 'block');
    $("#" + hoverId).find('.btn-footer').css('display', 'none');
    var dataId = $("#" + hoverId).attr("data-id");
    
    // 从CKEditor实例获取最新编辑内容
    var editorElement = document.getElementById(hoverId);
    var editor = editors.get(editorElement);
    var data = editor ? editor.getData() : $("#" + hoverId).find("p").html();
    
    if (data != "" && data != undefined) {
        updateNote(dataId, data);
    }
}

2. 优化AJAX回调逻辑 #

原代码中saveDes直接调用loadListView()会导致AJAX请求未完成就刷新页面，可能引发数据不一致，将刷新逻辑统一放到updateNote的成功回调中：

function updateNote(dataId, description) {
    debugger;
    var id = dataId;
    $.ajax({
        type: 'POST',
        url: '/Note/EditNote',
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        data: { Id: id, Description: description },
        success: function (response) {
            if (response.status == 400) {
                toastr.error(response.message);
            }
            else if (response.status == 200) {
                loadListView();
            }
        },
        error: function() {
            toastr.error('保存失败，请重试');
        }
    });
}

3. 可选优化：避免重复创建编辑器 #

原createEditor通过点击事件触发，可能重复创建编辑器实例，添加判断逻辑避免重复：

function createEditor(elementToReplace) {
    // 检查是否已存在编辑器实例
    if (editors.has(elementToReplace)) {
        return Promise.resolve(editors.get(elementToReplace));
    }
    return ClassicEditor
        .create(elementToReplace)
        .then(editor => {
            editors.set(elementToReplace, editor);
            return editor;
        })
        .catch(err => console.error(err.stack));
}

• 确认后端UpdateNote方法正确接收并更新description参数到数据库；
• 检查_NotesList视图是否通过@Html.Raw正确渲染更新后的HTML内容。

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