如何在Laravel框架中嵌入支持多图存储的文本编辑器以实现CRUD与多图保存

一、基于现有Summernote的改造方案（无需替换编辑器） #

批量多图保存失败的核心原因，是Summernote默认开启了图片转base64内嵌内容的逻辑，既没有对接后端存储接口，也没有处理多文件批量上传的回调流程，按照以下步骤改造即可实现需求：

• 第一步：初始化编辑器时，禁用默认的base64自动插入逻辑，重写onImageUpload回调，接管多文件上传流程：

  $('#content-editor').summernote({
    height: 400,
    placeholder: '请输入内容',
    callbacks: {
      // 该回调接收的files参数为浏览器返回的多文件对象，原生支持多选
      onImageUpload: function(files) {
        // 循环遍历选中的所有图片，逐个调用后端上传接口
        for (let i = 0; i < files.length; i++) {
          uploadImageToServer(files[i], $(this));
        }
      }
    }
  });
  

• 第二步：实现前端上传逻辑，对接Laravel后端接口，避免跨域、CSRF校验问题：

  function uploadImageToServer(file, editorInstance) {
    const formData = new FormData();
    formData.append('edit_image', file);
    // 携带Laravel全局CSRF令牌，避免419校验错误
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
  
    fetch('/api/editor/upload', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(response => {
      if (response.uploaded_path) {
        // 上传成功后将图片路径插入到编辑器光标位置
        editorInstance.summernote('insertImage', response.uploaded_path);
      }
    })
  }
  

• 第三步：Laravel后端接口适配存储逻辑：
  • 若需要将图片二进制存入MySQL而非本地文件系统，可单独新建editor_images关联表，字段包含关联内容ID、图片二进制blob、mime类型、存储路径ID，不要将二进制内容直接拼接在正文字段中
  • 接口接收上传文件后完成校验，将二进制内容写入对应关联表，返回可访问的图片路由路径
  • 配置专门的图片输出路由，根据传入的图片ID从数据库读取二进制内容，携带正确的Content-Type头返回给前端展示

二、适配技术栈的备选编辑器 #

如果Summernote改造后仍有兼容性问题，可选择和Laravel、Bootstrap生态适配性更好的编辑器，均支持批量多图插入+后端存储对接：

• TinyMCE 6：原生提供Bootstrap风格的UI适配，内置图片批量上传插件，无需自己编写多文件遍历逻辑，官方提供Laravel集成方案，可直接对接后端存储接口
• CKEditor 5：内置开箱即用的多图选择、插入能力，提供专门的Laravel安装包，默认处理了CSRF校验、文件类型校验的基础逻辑，和Bootstrap样式无冲突
• Quill：轻量级编辑器，体积远小于前两款，扩展图片上传的回调后即可实现批量多图插入，定制化成本低

注意：不要将多张图片的base64编码直接存入MySQL正文字段，即便数据库支持大字段存储，也会造成正文查询慢、页面加载体积过大的问题，需通过独立关联表分离图片和正文内容

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