如何在Laravel 5.6中将Quill.js编辑器内容保存到数据库

Hey，我之前刚解决过Laravel整合Quill时的这个问题，确实因为Quill的DOM结构和常规表单输入不一样，直接用$request->input('body')拿不到内容，不过分两步就能搞定：

前端：把Quill内容同步到可提交的字段 #

Quill的编辑内容并不是直接存在#editor这个div的value里，而是存在它的内部实例对象中。所以我们需要把编辑器内容同步到一个表单能识别的字段里，最常用的是隐藏input：

1. 先在你的表单里加一个隐藏input：

<form method="POST" action="/your-post-route">
    @csrf
    <!-- 你的其他表单字段 -->
    <div id="editor"></div>
    <input type="hidden" name="body" id="hidden-quill-content">
    <button type="submit">保存</button>
</form>

2. 初始化Quill后，把编辑器内容同步到这个隐藏input里。你可以选择实时同步或者提交前同步：

// 初始化Quill编辑器
const quill = new Quill('#editor', {
    theme: 'snow', // 或者你用的bubble主题
    modules: {
        toolbar: [/* 你的工具栏配置 */]
    }
});

// 方式1：实时同步（内容变化就更新）
quill.on('text-change', () => {
    document.getElementById('hidden-quill-content').value = quill.root.innerHTML;
});

// 方式2：表单提交前一次性同步（避免频繁更新）
document.querySelector('form').addEventListener('submit', (e) => {
    document.getElementById('hidden-quill-content').value = quill.root.innerHTML;
});

这里补充下：如果你想后续还能恢复编辑状态（比如编辑已有文章），可以存储Quill的Delta格式（而不是HTML），只需要把上面的quill.root.innerHTML换成JSON.stringify(quill.getContents())，后端存JSON字符串即可。

后端：Laravel接收并存储 #

现在你就可以用你原来的代码逻辑来获取内容了，完全不需要改太多：

public function store(Request $request)
{
    // 先做验证，比如要求body必填
    $request->validate([
        'body' => 'required',
    ]);

    $post = new Post();
    $post->body = $request->input('body'); // 这里拿到的就是Quill的HTML或Delta JSON
    $post->save();

    return redirect()->route('posts.index');
}

如果存储的是Delta格式，记得把数据库里的body字段类型设为text或者json（Laravel 5.5+支持JSON字段，查询和操作更方便）。

额外注意事项 #

• XSS防护：富文本内容可能包含恶意脚本，直接渲染的话有风险。如果你要在页面展示HTML内容，不要用{{ $post->body }}（会转义HTML），要用{!! $post->body !!}，但一定要先净化内容。推荐用mewebstudio/Purifier扩展，安装后可以在存储前或渲染前过滤掉危险标签。
• Ajax提交：如果用Ajax发请求，不需要隐藏input，直接把Quill内容作为请求参数发送就行：

axios.post('/your-post-route', {
    _token: '{{ csrf_token() }}',
    body: quill.root.innerHTML
})
.then(res => {
    // 处理成功响应
});

内容的提问来源于stack exchange，提问作者blaze-rowland