CKEditor 5文本区域内容无法同步更新问题求助

你遇到的问题很典型——CKEditor 5初始化后，原来的<textarea>元素会被编辑器的UI组件替换，它不再实时同步编辑器的内容，所以直接用$('#note').val()只能拿到编辑器加载时的初始值。下面给你两种可靠的解决办法：

方法一：直接通过CKEditor实例获取内容（推荐） #

CKEditor 5提供了getData()方法来获取编辑器的当前内容，你需要先拿到编辑器的实例，再调用这个方法。因为你用了EditorWatchdog，可以通过它的getEditor()方法获取实例：

修改你的点击事件代码：

$('#submit').on('click',function(e){
    // 阻止表单默认提交行为，避免页面刷新打断弹窗
    e.preventDefault();
    // 通过watchdog获取编辑器实例
    const editor = window.watchdog.getEditor();
    if(editor){
        const note = editor.getData();
        alert(note);
        // 如果需要提交表单，这里可以手动处理AJAX提交，或者先同步到textarea再提交
        // editor.updateSourceElement(); // 同步内容到原textarea
        // $('#newtask').submit();
    }
})

方法二：提交前手动同步内容到原textarea #

如果你还是想通过$('#note').val()获取内容，可以在获取前调用编辑器的updateSourceElement()方法，把编辑器内容同步回原来的textarea：

$('#submit').on('click',function(e){
    e.preventDefault();
    const editor = window.watchdog.getEditor();
    if(editor){
        // 同步编辑器内容到原textarea
        editor.updateSourceElement();
        const note = $('#note').val();
        alert(note);
    }
})

为什么原来的方法不行？ #

CKEditor 5采用分离式结构：初始化后，它会隐藏你提供的textarea元素，然后在页面上渲染独立的编辑区域。编辑器的内容会存储在内部模型中，而非实时同步到原textarea——只有在表单默认提交时，CKEditor才会自动触发同步。但你的点击事件是手动获取值，此时还没触发同步逻辑，所以拿到的是初始内容。

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