Thinkphp5.0整合Simditor编辑器踩过的坑
Simditor编辑器是一款功能强大的富文本编辑器,支持多种扩展如markdown、表情、Markdown笔等。默认情况下,编辑器不上传图片,需要手动在配置中打开上传路径才能上传文件。上传成功后,返回的是一个data:base64格式的图片,可能需要根据七牛云等服务的需求进行相应的调整。

写这篇文章的时候要说下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);
          }

  }
咻兔哔
咻兔哔·2020年1月17日

本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处

推荐文章

构建现代化个人博客系统:技术亮点与创新实践
后端技术

构建现代化个人博客系统:技术亮点与创新实践

本文介绍了作者构建现代化个人博客系统的技术选型、架构设计和创新实践。核心亮点包括采用Go+Nuxt.js+Vue3技术栈,实现高性能、可扩展的博客平台;创新功能如AI智能摘要生成系统、高性能全文搜索、现代化文件上传系统;微服务化架构、容器化部署及多层次安全防护;性能优化策略如缓存策略、数据库优化和前端性能优化。此外,还展示了智能简历模块、Waline评论系统及多主题支持等特色功能,系统性能指标优异。作者分享了技术收获与未来规划,旨在帮助全栈开发者提升技术能力。

12月10日16
本站更换了新的技术栈
后端技术

本站更换了新的技术栈

本文介绍了基于Go+Nuxt.js+Vue3技术栈构建的现代化个人博客系统。该系统采用微服务架构,包含前台展示、后台管理和API服务三大模块,支持容器化部署,具备高性能与高可用性。后端使用Go、Gin、GORM等技术,前端采用Nuxt.js+Vue3+TailwindCSS,并集成AI智能摘要生成、全文搜索、文件上传等核心功能。系统注重安全设计,实施JWT认证、XSS防护等措施,同时通过Redis缓存、CDN加速等策略优化性能。整体架构展示了现代Web开发的最佳实践,为同类项目提供参考价值。

12月10日14
Gorm格式化时间输出的另一种实现
后端技术

Gorm格式化时间输出的另一种实现

Gorm在读取时间时默认带有时区,不符合常规的日期格式。本文提出了一种通过自定义结构体和使用Gorm的Hook方式来解决这个问题。作者首先定义了一个只包含时间字段的结构体,并使用`Str`后缀和`json`标签来指定时间字段只参与存储而不参与数据输出。接着,通过Gorm的Hook机制实现时间字段的格式化。虽然这种方法不是特别高明,但确实提供了一种有效的解决方案。

7月22日17
Golang三方库收集-不定期更新
后端技术

Golang三方库收集-不定期更新

以下是一些热门的第三方库,包括网络请求库、RPC库、Web框架、热重启库、定时任务库、获取机器状态库、JWT库、验证码库、邮件库、汉字转拼音库、消息队列库、随机数库、Redis客户端库、雪花 ID 生成器库、Excel处理库、WEB框架库、数据库库、配置库、REDIS库、工具包库、参数验证库、日志库、JSON库、协程池库和类型转换库。这些库各有特色,适用于不同的开发场景,值得一试。

7月28日7