Summernote通知区域未显示，请求排查代码问题

我来帮你排查一下问题所在～你现在的代码里直接修改.note-status-output的内容但看不到效果，主要有两个核心原因：

1. .note-status-output这个元素默认是隐藏状态（CSS设置了display: none），就算你修改了它的HTML内容，它还是不会自动显示出来；
2. 直接用全局类选择器操作DOM元素，不仅可能影响页面上的多个编辑器实例，还没有遵循Summernote的内部逻辑，容易出现兼容性问题。

正确的解决方案：使用Summernote官方API #

Summernote专门提供了status()方法来设置底部通知区域的内容，这个方法会自动处理元素的显示/隐藏逻辑，是最稳妥的方式。修改你的代码如下：

第一步：合并Summernote初始化代码（避免重复初始化）

$(document).ready(function() {
    // 只初始化一次，把所有配置参数放在这里
    $('#summernote').summernote({
        maxHeight: 300,
        dialogsInBody: true,
        dialogsFade: true // 添加对话框淡入效果
    });
});

第二步：修改test()函数，用API设置通知

function test(){
    // 通过Summernote实例调用status方法，传入要显示的HTML内容
    $('#summernote').summernote('status', '<div class="alert alert-danger">' +
        'This is an error using a Bootstrap alert that has been restyled to fit here.' +
        '</div>'
    );
}

备选方案：手动控制DOM元素（不推荐，仅应急使用） #

如果你非要直接操作DOM，需要先精准定位当前编辑器对应的.note-status-output元素，然后修改内容并手动显示它：

function test(){
    // 找到当前编辑器对应的状态输出元素（避免影响其他编辑器）
    var statusElement = $('#summernote').closest('.note-editor').find('.note-status-output');
    // 修改内容并强制显示
    statusElement.html('<div class="alert alert-danger">' +
        'This is an error using a Bootstrap alert that has been restyled to fit here.' +
        '</div>'
    ).show();
}

这个方法虽然能生效，但不如官方API稳定——因为Summernote的DOM结构可能在版本更新中变化，而官方API会保持向后兼容性。

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