summernote 编辑器图片上传

暂无标签

lavavel示例

<textarea name="message_message" class="message_message form-control" rows="10"></textarea>

<script>
$('.summernote').summernote({
    lang:'zh-CN',
    height:500,
    toolbar: [
        ['style', ['bold', 'italic']],
        ['insert', ['link', 'picture']],
        ['para', ['paragraph', 'ol', 'ul']]
    ],
    callbacks: {
        onImageUpload: function(files,editor,welEditable){
            sendFile(files[0],$('textarea[name=message_message]'));
        }
    }
});
function sendFile(file, editor) {
  data = new FormData();
  data.append("file", file);
  url = "/api/upload/summernote";
  $.ajax({
    data: data,
    type: "POST",
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    url: url,
    cache: false,
    contentType: false,
    processData: false,
    success: function (res) {
        if(res.success){
          editor.summernote('insertImage', res.url, '插入图片');
        }else{
            ajaxmsg('error',res.message);    
        }
    }
  });
}
</script>

/api/upload/summernote

if($request->isMethod('POST')) {
  $fileCharater = $request->file('file');
  $size = $fileCharater->getSize() / 1024;
  if ($fileCharater->isValid()) {
      if($size < 200){
      //获取文件的扩展名
      $ext = $fileCharater->getClientOriginalExtension();
      if(!in_array( strtolower($ext),['jpeg','jpg','gif','gpeg','png'])){
          return ['success' => false, 'message' => '该类型文件不允许添加'];
      }
      //获取文件的绝对路径
      $path = $fileCharater->getRealPath();
      //定义文件名
      $filename = md5(date('Y-m-d-h-i-s')) . '.' . $ext;
      //存储文件。disk里面的public。总的来说,就是调用disk模块里的public配置
     // Storage::disk('public')->put($filename, file_get_contents($path));
         $fileCharater->move(public_path().'/uploads/images/summernote/', $filename);
      return ['success' => true, 'url' => '/uploads/images/summernote/'.$filename, 'filename' => $filename];
    }else{
        return ['success' => false, 'message' => '图片不能大于200K'];
    }
  }
  return ['success' => false, 'message' => '图片解析失败'];
}