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);
          }

  }
支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章