Laravel 11中从Quill Editor获取数据并插入MySQL数据库的问题

问题根源 #

Quill的编辑区域是普通<div>元素，哪怕给它加name属性，表单提交时也不会把它的内容带到后端——因为只有标准表单控件（比如<input>、<textarea>）才会被表单自动提交。

前端修改步骤 #

1. 添加隐藏输入框
   在Quill的div旁边加一个隐藏的<input>，用来存储编辑器的HTML内容，给它设置和你想要提交的字段名一致的name：

   <div id="content" style="height: 300px;">
     <p>Start writing here...</p>
   </div>
   <!-- 新增隐藏input，用于中转编辑器内容 -->
   <input type="hidden" name="content" id="hidden-content">
   

2. 初始化Quill并同步内容
   初始化Quill编辑器时，监听内容变化事件，把编辑器的HTML内容同步到隐藏input里：

   // 初始化Quill编辑器
   const quill = new Quill('#content', {
     theme: 'snow', // 可选'bubble'主题
     modules: {
       toolbar: [
         ['bold', 'italic', 'underline'],
         ['link', 'code-block'],
         [{ list: 'ordered' }, { list: 'bullet' }]
       ]
     }
   });
   
   // 监听内容变化，实时同步到隐藏input
   quill.on('text-change', function() {
     const htmlContent = quill.root.innerHTML;
     document.getElementById('hidden-content').value = htmlContent;
   });
   
   // 编辑页面回显内容（如果需要）
   // 假设后端传递的内容存在变量$content中
   // quill.root.innerHTML = {!! $content !!};
   

后端Laravel处理步骤 #

1. 定义路由
   在routes/web.php中添加提交路由：

   use App\Http\Controllers\PostController;
   
   Route::post('/posts/store', [PostController::class, 'store'])->name('posts.store');
   

2. 控制器存储逻辑
   在app/Http/Controllers/PostController.php中编写接收、验证、存储逻辑：

   namespace App\Http\Controllers;
   
   use Illuminate\Http\Request;
   use App\Models\Post;
   
   class PostController extends Controller
   {
       public function store(Request $request)
       {
           // 验证请求数据
           $validated = $request->validate([
               'content' => 'required|string',
               // 按需添加其他字段的验证规则
           ]);
   
           // 存入MySQL数据库
           Post::create([
               'content' => $validated['content'],
               // 按需赋值其他字段
           ]);
   
           return redirect()->back()->with('success', '内容保存成功');
       }
   }
   

3. 模型配置
   确保你的模型（比如Post）允许content字段批量赋值：

   namespace App\Models;
   
   use Illuminate\Database\Eloquent\Model;
   
   class Post extends Model
   {
       protected $fillable = ['content']; // 按需添加其他允许批量赋值的字段
   }
   

额外提示 #

• 如果需要存储纯文本而非HTML，把quill.root.innerHTML替换为quill.getText()即可。
• 存储HTML内容时要注意XSS防护，可使用Laravel生态的purify扩展包对内容进行过滤后再存储。

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