如何监听CKEditor 5的撤销/重做栈事件并实现编辑内容的自动服务器保存

当然可以实现！CKEditor 5的Undo插件确实提供了对应的事件来监听撤销栈的变化，正好能满足你批量触发保存的需求，不用再频繁处理change:data的按键级事件。下面是具体的实现步骤和代码示例：

1. 获取Undo插件实例并监听关键事件 #

首先，在编辑器初始化完成后，你可以通过editor.plugins.get('Undo')获取到Undo插件的实例，它提供了三个核心事件来覆盖你的需求：

• add：当新的撤销条目被添加到栈中时触发（比如用户连续输入一段文字、完成一次格式化操作后，Undo会把这些操作合并成一个条目，此时就会触发这个事件）
• undo：当用户执行撤销操作（Ctrl+Z）时触发
• redo：当用户执行重做操作（Ctrl+Y）时触发

2. 结合自动保存的完整代码示例 #

ClassicEditor
    .create(document.querySelector('#editor'))
    .then(editor => {
        // 获取Undo插件实例
        const undoPlugin = editor.plugins.get('Undo');
        
        // 定义防抖后的保存函数（可选，应对快速多次操作场景）
        let saveDebounceTimeout;
        const saveToServer = (content) => {
            clearTimeout(saveDebounceTimeout);
            saveDebounceTimeout = setTimeout(() => {
                // 替换成你的服务器保存接口逻辑
                fetch('/your-save-endpoint', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        // 如果需要身份验证，这里可以添加token等
                        // 'Authorization': 'Bearer ' + yourToken
                    },
                    body: JSON.stringify({
                        content: content,
                        // 可以额外传递编辑器ID等标识信息
                        editorId: 'main-editor'
                    })
                })
                .then(response => {
                    if (!response.ok) throw new Error('保存请求失败');
                    return response.json();
                })
                .then(data => {
                    console.log('保存成功:', data);
                })
                .catch(err => {
                    console.error('保存出错:', err);
                });
            }, 200); // 200ms防抖，可根据需求调整
        };

        // 监听撤销条目添加（用户编辑产生批量变更时）
        undoPlugin.on('add', () => {
            saveToServer(editor.getData());
        });

        // 监听撤销操作
        undoPlugin.on('undo', () => {
            saveToServer(editor.getData());
        });

        // 监听重做操作
        undoPlugin.on('redo', () => {
            saveToServer(editor.getData());
        });
    })
    .catch(err => {
        console.error('编辑器初始化失败:', err);
    });

3. 为什么这能解决你的问题？ #

Undo插件的add事件不会在每次按键时触发——它会把用户的连续操作（比如输入多个字符、拖动选中文字等）合并成单个撤销条目，只有当用户停止操作一小段时间，或者执行了一个会中断连续操作的动作（比如点击工具栏按钮）时，才会触发add事件。这正好完美匹配你想要批量处理变更、减少服务器请求的需求。

而undo和redo事件则能覆盖用户回退或恢复操作时的内容变更，确保任何编辑器内容的修改都会触发保存。

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