Laravel 8中CKEditor图片存编辑后加载异常问题求解

核心原因 #

直接在<textarea>中输出未处理的富文本内容时，易触发两类问题：

• 内容中的特殊字符（如双引号、</textarea>片段）会破坏HTML结构，导致页面解析错误，出现持续加载或乱码
• Blade默认的{{ }}转义会将HTML标签转为实体字符，使得CKEditor无法识别富文本格式

解决方案 #

方案1：用JavaScript初始化CKEditor并动态设置内容（推荐） #

通过JSON编码确保所有特殊字符被正确转义，再通过JavaScript将内容传入CKEditor，彻底避免HTML结构被破坏：

<textarea name="long_desc" class="form-control" id="summernote" rows="20"></textarea>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 初始化CKEditor（可根据需求添加配置项）
    const editor = CKEDITOR.replace('summernote', {
        filebrowserUploadUrl: '/ckeditor/upload',
        toolbar: 'Full'
    });

    // 安全注入富文本内容
    editor.setData({!! json_encode($portfolio_data->long_desc) !!});
});
</script>

方案2：处理HTML转义后直接输出到textarea #

若坚持直接在textarea中输出内容，需用htmlspecialchars处理富文本，保留HTML标签同时转义特殊字符：

<textarea name="long_desc" class="form-control" id="summernote" rows="20">
    {!! htmlspecialchars($portfolio_data->long_desc, ENT_QUOTES, 'UTF-8') !!}
</textarea>

额外排查项 #

• 验证图片访问路径：若图片存在storage/app/public目录，需执行php artisan storage:link创建软链接，确保前端能正常访问图片
• 清理数据库异常字符：检查long_desc字段是否包含不可见控制字符（如NULL字节），若有需清理后重新保存
• 检查CKEditor版本兼容性：确保使用的CKEditor版本与Laravel项目环境匹配，避免版本冲突导致解析异常

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