为何接入NicEdit富文本编辑器后未保存更改警告不显示？

失效原因 #

• 原有未保存提示的触发逻辑，是绑定在原生表单控件的change事件上。NicEdit初始化后会把原生textarea替换成独立的contenteditable编辑块，这个编辑块不属于原生表单控件范围，用户在里面输入的所有内容，都无法被原来的事件监听器捕获，自然触发不了未保存提示。
• 原有代码本身存在逻辑漏洞：既没有设置固定的未保存提示文案，又要等第一次触发change事件才去绑定window.onbeforeunload离开提示钩子，本身逻辑就不完整。

落地实现逻辑 #

• 调整NicEdit初始化方式：不要用无回调的简写初始化方法，要在编辑器实例创建完成后，能拿到每个编辑器的实例对象，方便绑定自定义监听。
• 为每个编辑器实例绑定两个核心监听：一是用户在编辑区输入时，实时标记存在未保存更改；二是编辑区失焦时，把编辑区的内容同步回底层的原生textarea，避免自定义提交逻辑时拿不到正确的富文本内容。
• 修正原有离开提示逻辑：页面加载时就提前绑定好全局的离开提示钩子，用独立的全局标记位判断是否需要弹提示，不用等首次输入才去绑钩子。
• 补全提交场景的判断：覆盖所有类型的提交按钮，用户点击提交时把未保存标记清除，避免点击提交跳转时还弹出未保存提示的误判。

整合后的可直接复用代码 #

// 全局标记位：是否存在未保存更改
let hasUnsavedChanges = false;
// 固定的未保存提示文案
const warnMessage = "当前页面存在未保存的更改，确定要离开吗？";

$(document).ready(function() {
    // 页面加载时就提前绑定全局离开提示钩子
    window.onbeforeunload = function(e) {
        if (hasUnsavedChanges) {
            e.preventDefault();
            e.returnValue = warnMessage;
            return warnMessage;
        }
    }

    // 给所有原生表单控件绑定变更监听，覆盖输入、选择等各种操作
    $(':input').on('change input', function() {
        hasUnsavedChanges = true;
    });

    // 初始化NicEdit编辑器
    bkLib.onDomLoaded(function() {
        nicEditors.allTextAreas({
            // 每个编辑器实例创建完成后的回调
            onInstanceCreated: function(editor) {
                // 输入时直接标记存在未保存更改
                editor.addEvent('keyup', function() {
                    hasUnsavedChanges = true;
                });
                // 编辑区失焦时同步内容到底层textarea
                editor.addEvent('blur', function() {
                    editor.saveContent();
                    hasUnsavedChanges = true;
                });
            }
        });
    });

    // 覆盖所有类型的提交按钮，点击时清除未保存标记
    $('input:submit, button[type="submit"]').on('click', function() {
        hasUnsavedChanges = false;
    });
});

注意事项 #

• 原有代码的提交按钮选择器只覆盖了input:submit类型，如果页面里存在<button type="submit">形式的提交按钮，必须加入选择器范围，否则会出现用户点了提交跳转仍弹提示的问题。
• 不能省略editor.saveContent()的同步逻辑：NicEdit默认仅在原生表单提交时才会把编辑内容写回textarea，如果页面用的是自定义异步提交，不同步的话会导致提交的富文本内容为空。
• 如果页面存在跳转到其他站点/其他页面的按钮，且跳转前已经确认完成保存操作，记得手动把hasUnsavedChanges标记设为false，避免出现误提示。

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