1. 下载 Simditor

开始之前，先 点击此处下载 Simditor ，下载完成后解压到文件夹 simditor-2.3.6 ，内容如下：

2. 集成到项目中

接下来新建以下两个文件夹：

• resources/editor/css

• resources/editor/js

或者可以使用以下命令：

$ mkdir -p resources/editor/css
$ mkdir -p resources/editor/js

将下载的 simditor.css 放置于 resources/editor/css 文件夹，将 hotkeys.js, module.js, simditor.js, uploader.js 四个文件放置于 resources/editor/js 文件夹中，如下：

3. 加载和渲染

页面调用：

resources/views/topics/create_and_edit.blade.php

...@section('styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('css/simditor.css') }}">@stop

@section('scripts')
  <script type="text/javascript" src="{{ asset('js/module.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/hotkeys.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/uploader.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/simditor.js') }}"></script>

  <script>
    $(document).ready(function() {
      var editor = new Simditor({
        textarea: $('#editor'),
      });
    });
  </script>@stop

刷新页面即可看到我们的编辑器：

4、上传图片

接下来我们要为编辑器添加图片上传功能。

4.1. 设置路由

我们需要先设置路由，这样接下来我们才能设置上传图片的 URL：

routes/web.php

...Route::post('upload_image', 'TopicsController@uploadImage')->name('topics.upload_image');

4.2. JS 脚本调用

我们已经在前面的章节中把 uploader.js 脚本加载进来了，接下来只需要按照 编辑器上传图片文档 进行设定即可：

resources/views/topics/create_and_edit.blade.php

...@section('scripts')
  <script type="text/javascript" src="{{ asset('js/module.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/hotkeys.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/uploader.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/simditor.js') }}"></script>

  <script>
    $(document).ready(function() {
      var editor = new Simditor({
        textarea: $('#editor'),
        upload: {
          url: '{{ route('topics.upload_image') }}',
          params: {
            _token: '{{ csrf_token() }}'
          },
          fileKey: 'upload_file',
          connectionCount: 3,
          leaveConfirm: '文件上传中，关闭此页面将取消上传。'
        },
        pasteImage: true,
      });
    });
  </script>@stop

参数解释：

• pasteImage —— 设定是否支持图片黏贴上传，这里我们使用 true 进行开启；

• url —— 处理上传图片的 URL；

• params —— 表单提交的参数，Laravel 的 POST 请求必须带防止 CSRF 跨站请求伪造的 _token 参数；

• fileKey —— 是服务器端获取图片的键值，我们设置为 upload_file;

• connectionCount —— 最多只能同时上传 3 张图片；

• leaveConfirm —— 上传过程中，用户关闭页面时的提醒。

4.3. 控制器图片处理

页面调用已经准备好，接下来是编写服务器端的逻辑。根据 编辑器上传图片文档 ，服务器端通过返回以下 JSON 来反馈上传状态：

{
  "success": true/false,
  "msg": "error message", # optional
  "file_path": "[real file path]"}

在 Laravel 的控制器方法中，如果直接返回数组，将会被自动解析为 JSON。接下来我们编写控制器的逻辑，根据第一步设置的路由在话题控制器中新增 uploadImage 方法：

app/Http/Controllers/TopicsController.php

<?php...use App\Handlers\ImageUploadHandler;class TopicsController extends Controller{
    .
    .
    .
    public function uploadImage(Request $request, ImageUploadHandler $uploader)
    {
        // 初始化返回数据，默认是失败的
        $data = [
            'success'   => false,
            'msg'       => '上传失败!',
            'file_path' => ''
        ];
        // 判断是否有上传文件，并赋值给 $file
        if ($file = $request->upload_file) {
            // 保存图片到本地
            $result = $uploader->save($request->upload_file, 'topics', \Auth::id(), 1024);
            // 图片保存成功的话
            if ($result) {
                $data['file_path'] = $result['path'];
                $data['msg']       = "上传成功!";
                $data['success']   = true;
            }
        }
        return $data;
    }}

请注意在文件顶部引入 ImageUploadHandler。

ImageUploadHandler.php

<?php

namespace App\Handlers;

use Image;

class ImageUploadHandler
{
    protected $allowed_ext = ["png", "jpg", "gif", 'jpeg'];

    public function save($file, $folder, $file_prefix, $max_width = false)
    {
        // 构建存储的文件夹规则，值如：uploads/images/avatars/201709/21/
        // 文件夹切割能让查找效率更高。
        $folder_name = "uploads/images/$folder/" . date("Ym/d", time());

        // 文件具体存储的物理路径，`public_path()` 获取的是 `public` 文件夹的物理路径。
        // 值如：/home/vagrant/Code/larabbs/public/uploads/images/avatars/201709/21/
        $upload_path = public_path() . '/' . $folder_name;

        // 获取文件的后缀名，因图片从剪贴板里黏贴时后缀名为空，所以此处确保后缀一直存在
        $extension = strtolower($file->getClientOriginalExtension()) ?: 'png';

        // 拼接文件名，加前缀是为了增加辨析度，前缀可以是相关数据模型的 ID
        // 值如：1_1493521050_7BVc9v9ujP.png
        $filename = $file_prefix . '_' . time() . '_' . str_random(10) . '.' . $extension;

        // 如果上传的不是图片将终止操作
        if ( ! in_array($extension, $this->allowed_ext)) {
            return false;
        }

        // 将图片移动到我们的目标存储路径中
        $file->move($upload_path, $filename);

        // 如果限制了图片宽度，就进行裁剪
        if ($max_width && $extension != 'gif') {

            // 此类中封装的函数，用于裁剪图片
            $this->reduceSize($upload_path . '/' . $filename, $max_width);
        }

        return [
            'path' => config('app.url') . "/$folder_name/$filename"
        ];
    }

    public function reduceSize($file_path, $max_width)
    {
        // 先实例化，传参是文件的磁盘物理路径
        $image = Image::make($file_path);

        // 进行大小调整的操作
        $image->resize($max_width, null, function ($constraint) {

            // 设定宽度是 $max_width，高度等比例双方缩放
            $constraint->aspectRatio();

            // 防止裁图时图片尺寸变大
            $constraint->upsize();
        });

        // 对图片修改后进行保存
        $image->save();
    }
}