Thinkphp5.0整合Simditor编辑器踩过的坑

写这篇文章的时候要说下Simditor这个编辑器还是不错的,唯一不足的是明明是国人开发的非要弄个英文文档,看的迷迷糊糊的.
要说使用这个编辑器扩展性还是很强的,富文本、markdown、表情、mark笔等等很多。

今天主要说的是上传图片这一块,编辑器默认上传图片是关闭的,要在配置里面手动打开,配置好上传路径以后就可以上传文件了

var editor = new Simditor({ textarea: $('#editor'), defaultImage:"/static/admin/img/a1.jpg", markdown:true, toolbar: ['markdown','mark','title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table','image','emoji'], emoji:{ imagePath:'/static/admin/js/simditor/ext/simditor-emoji/images/emoji' }, upload:{ url:"{{:url('/admin/upload','','')}}", params:null, fileKey:'image', connectionCount:3, leaveConfirm:'正在上传文件' } });

主要说下服务端这边的时候,上传成功后没有文档说明,返回的老是data:base64的图片格式,不多说备注一下以后可能需要,以七牛为例上传后返回格式为 success、file_path两个参数

public function index(){ $file = request()->file('image'); // 需要填写你的 Access Key 和 Secret Key $accessKey = config('Qiniu.AccessKey'); $secretKey = config('Qiniu.SecretKey'); // // // 构建鉴权对象 $auth = new Auth($accessKey, $secretKey); // // 要上传的空间 $bucket = config('Qiniu.Bucket'); // // // 生成上传 Token $token = $auth->uploadToken($bucket); // // // 要上传文件的本地路径 $filePath = $file->getRealPath(); // // // 上传到七牛后保存的文件名 $ext = pathinfo($file->getInfo('name'), PATHINFO_EXTENSION); //获取文件后缀 $key = date('Y-m-d',time()).'-'.time().'.'.$ext; // // 初始化 UploadManager 对象并进行文件的上传 $uploadMgr = new UploadManager(); // // // 调用 UploadManager 的 putFile 方法进行文件的上传 list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath); if ($err !== null) { return $err; } else { $data = [ 'success'=>true, 'file_path'=>config('Qiniu.Domain') . $key ]; return json($data); } }