如何在TinyMCE For Flow中实现自动保存避免浏览器关闭丢内容？

一、使用TinyMCE Autosave插件解决 #

TinyMCE For Flow本质是对常规TinyMCE的Vaadin封装，Autosave插件完全可以适配使用，只需在组件初始化时正确配置插件及相关参数：

1. 初始化TinyMce组件时添加Autosave插件，并配置核心参数：

TinyMce tinyMce = new TinyMce();
// 添加autosave插件
tinyMce.withPlugins("autosave");
// 配置自动保存间隔（毫秒）
tinyMce.addCustomSetting("autosave_interval: '3000'");
// 配置本地存储保留时间（分钟）
tinyMce.addCustomSetting("autosave_retention: '240'");
// 开启空内容时恢复自动保存的内容
tinyMce.addCustomSetting("autosave_restore_when_empty: true");
// 配置保存回调，将内容同步到Vaadin后端的TinyMce对象
tinyMce.addCustomSetting("save_onsavecallback: function() {" +
    "   var content = tinymce.activeEditor.getContent();" +
    "   $server.saveContent(content);" +
    "}");

2. 在Java端实现saveContent方法，接收前端传递的内容并更新TinyMce对象：

@ClientCallable
public void saveContent(String content) {
    tinyMce.setValue(content);
    // 可额外添加持久化逻辑，比如保存到数据库
}

Autosave插件会在后台定期将内容保存到浏览器本地存储，同时通过回调同步到后端组件，即使标签页意外关闭，下次打开时可恢复本地存储的内容，已同步的内容也不会丢失。

二、监听浏览器beforeunload事件手动同步 #

如果不想依赖Autosave插件，可直接监听浏览器的beforeunload事件，在标签页关闭前强制同步编辑器内容到后端：

1. 在UI初始化时注册事件监听：

Page.getCurrent().executeJs("""
    window.addEventListener('beforeunload', function(event) {
        var editor = tinymce.activeEditor;
        if (editor && editor.isDirty()) {
            var content = editor.getContent();
            // 调用后端方法同步内容
            $server.saveContent(content);
            // 部分浏览器需要触发preventDefault以确保同步完成
            event.preventDefault();
            event.returnValue = '';
        }
    });
""");

2. 同样实现上述带有@ClientCallable注解的saveContent方法，将内容设置到TinyMce对象中。

这种方式能确保标签页关闭前，编辑器的修改内容被强制同步到后端组件，避免丢失。

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