Laravel中Summernote编辑器内容加载异常问题求助

1. 正确输出未转义的HTML内容 #

你当前使用{{ $portfolio_data->long_desc }}会自动转义HTML标签，导致Summernote无法正确解析富文本结构，反而把标签当成普通文本处理，甚至引发解析卡顿。应该改用未转义输出语法：

<textarea name="long_desc" class="form-control" id="summernote" rows="20">{!! $portfolio_data->long_desc !!}</textarea>

注意：如果内容来自前端用户提交，务必先做XSS过滤（比如用Laravel的strip_tags函数，或第三方HTML清理库），避免安全风险。

2. 确保编码一致性 #

• 数据库字符集检查：存储long_desc的字段及对应数据表，需设置为utf8mb4字符集（支持emoji和全范围特殊字符），排序规则设为utf8mb4_unicode_ci。
• Laravel数据库配置：在config/database.php的数据库连接项中，设置charset为utf8mb4，collation为utf8mb4_unicode_ci。
• 页面编码：确保HTML头部的meta标签为<meta charset="UTF-8">，避免页面与内容编码不匹配导致乱码。

3. 确保Summernote正确初始化 #

必须等DOM完全加载后再初始化编辑器，避免编辑器启动时textarea内容还未渲染完成。示例代码：

$(document).ready(function() {
    $('#summernote').summernote({
        height: 500, // 可根据需求调整高度
        // 其他编辑器配置项
    });
});

若使用原生JS：

document.addEventListener('DOMContentLoaded', function() {
    $('#summernote').summernote({
        height: 500
    });
});

4. 检查并修复损坏的HTML内容 #

如果数据库中存储的HTML存在未闭合标签、错误嵌套或未转义的特殊字符（比如引号），会导致Summernote解析卡顿甚至崩溃。可以：

• 保存内容时用HTML清理工具过滤修复：安装mews/purifier包

  composer require mews/purifier
  

  配置后在保存逻辑中处理：

  $portfolio->long_desc = clean($request->long_desc);
  

• 手动排查数据库中long_desc字段的内容，移除或修复明显错误的HTML标签。

内容的提问来源于stack exchange，提问作者MD. RONY AHMED