Summernote无法在Laravel表单中正常工作的技术求助

我明白你在使用Laravel Collective Form构建文章提交表单时，碰到了Summernote编辑器没法正常工作的问题。结合你给出的代码片段，我整理了几个最常见的排查和解决步骤，你可以一步步试试：

1. 先确认Summernote的依赖资源是否正确引入 #

Summernote依赖jQuery和对应的CSS/JS文件，一定要确保这些资源在页面里正确加载，而且顺序不能错——jQuery必须在Summernote的JS之前引入。

你可以在页面的<head>标签里添加CSS，在页面底部（</body>之前）添加JS，示例如下：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Summernote的样式文件 -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs4.min.css" rel="stylesheet">
<!-- Summernote的核心JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs4.min.js"></script>

提示：如果你用的是Bootstrap 3版本，记得把资源换成summernote.min.css和summernote.min.js，版本也要对应上。

2. 为表单添加Summernote文本域并完成初始化 #

你的现有代码里还没有添加Summernote对应的输入区域，首先要用Laravel Collective Form添加一个textarea，然后给它加个专属类名用来初始化编辑器：

{{-- 添加文章内容的Summernote编辑器 --}}
{{ Form::label('body', 'Post Content:') }}
{{ Form::textarea('body', null, array('class' => 'form-control summernote-editor', 'rows' => 5)) }}

接着在页面底部添加初始化脚本，让Summernote绑定到这个textarea上：

$(document).ready(function() {
    $('.summernote-editor').summernote({
        height: 300, // 自定义编辑器的高度
        placeholder: 'Write your post content here...' // 设置占位提示文本
    });
});

3. 检查表单提交与后端接收的兼容性 #

Summernote会把你编辑的富文本内容自动同步到对应的textarea里，所以表单提交时body字段能正常获取到HTML内容。不过要注意：

• 后端验证时，把body字段设置为nullable|string即可，不需要额外限制（如果要存储HTML，确保数据库字段类型是text或者longtext）。
• 前端显示文章内容时，要用{!! $post->body !!}来渲染HTML，不能用{{ $post->body }}（后者会转义HTML标签）。

4. 排查常见冲突问题 #

如果还是不行，打开浏览器的开发者工具（按F12）看控制台有没有报错：

• 如果出现$ is not defined：说明jQuery没加载成功，或者加载顺序错了，检查jQuery的引入是否在Summernote JS之前。
• 如果出现Summernote相关的错误：可能是资源版本不兼容，或者页面里有多个jQuery版本，删掉多余的即可。

完整示例代码 #

我把你的代码补全并加上Summernote的部分，你可以参考：

{!! Form::open(array('route' => 'posts.store', 'files' => true)) !!}

    {{ Form::label('title', 'Title:') }}
    {{ Form::text('title', null, array('class' => 'form-control'))}}

    {{ Form::label('slug', 'Slug:') }}
    {{ Form::text('slug', null, array('class' =>'form-control', 'required' => '', 'minlength' => '5', 'maxlength' => '255')) }}

    {{ Form::label('category_id', 'Category:') }}
    <select class="form-control" name="category_id">
        @foreach($categories as $category)
            <option value="{{ $category->id }}">{{ $category->name }}</option>
        @endforeach
    </select>

    {{-- Summernote编辑器区域 --}}
    {{ Form::label('body', 'Post Content:') }}
    {{ Form::textarea('body', null, array('class' => 'form-control summernote-editor', 'rows' => 5)) }}

    {{ Form::submit('Create Post', array('class' => 'btn btn-success mt-3')) }}

{!! Form::close() !!}

<!-- 依赖资源引入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs4.min.js"></script>

<!-- 初始化Summernote -->
<script>
    $(document).ready(function() {
        $('.summernote-editor').summernote({
            height: 300,
            placeholder: 'Write your post content here...'
        });
    });
</script>

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