Laravel-admin 集成 simditor

• laravel5.5
• laravel-admin 1.5.*
• simditor 3.0.9

1. 创建Field扩展

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class Simditor extends Field
{
    protected $view = 'admin.simditor';

    protected static $css = [
        '/packages/simditor-2.3.6/styles/simditor.css',
    ];

    protected static $js = [
        '/packages/simditor-2.3.6/scripts/module.js',
        '/packages/simditor-2.3.6/scripts/hotkeys.js',
        '/packages/simditor-2.3.6/scripts/uploader.js',
        '/packages/simditor-2.3.6/scripts/simditor.js',

    ];

    public function render()
   {
       $name = $this->formatName($this->column);
       $token = csrf_token();
       $url = route('uploadImg');

       $this->script = <<<EOT
$(document).ready(function(){

      var editor = new Simditor({
          textarea: $('#editor'),
          toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'],
          upload: {
                url: '$url',
                params: { _token: '$token'},
                fileKey: 'upload_file',
                connectionCount: 3,
                leaveConfirm: '文件上传中，关闭此页面将取消上传。'
            },
            pasteImage: true,
      });
 });
EOT;
       return parent::render();

   }
}

2. 创建对应视图

<div class="form-group {!! !$errors->has($label) ?: 'has-error' !!}">

    <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>

    <div class="{{$viewClass['field']}}">

        @include('admin::form.error')

        <div id="{{$id}}" style="width: 100%; height: 100%;">
            <textarea name="body" id="editor" rows="3" placeholder="请填入至少三个字符的内容" required="required" class="form-control">{{ old($column, $value) }}</textarea>
        </div>
    </div>
</div>

3. bootstrap.php中注册扩展

use App\Admin\Extensions\Simditor;
use Encore\Admin\Form;

Encore\Admin\Form::forget(['map', 'editor']);
Form::extend('seditor', Simditor::class);

4. 调用simditor

$form->seditor('body', '文章内容');

5. 图片上传（来自Laravel 教程 - Web 开发实战进阶 ( Laravel 5.5 )）

• 安装Intervention/image扩展包

composer require intervention/image

• 获取配置信息

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

• 创建工具类app/Handlers/ImageUploadHandler.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();
    }
}

• 创建上传控制器和相关路由

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Handlers\ImageUploadHandler;
use Auth;
use Log;

class UploadsController extends Controller
{
    public function uploadImg(Request $request, ImageUploadHandler $uploader)
       // 初始化返回数据，默认是失败的
        $data = [
            'success'   => false,
            'msg'       => '上传失败!',
            'file_path' => ''
        ];
        // 判断是否有上传文件，并赋值给 $file
        if ($file = $request->upload_file) {

            // 保存图片到本地
            $result = $uploader->save($request->upload_file, 'article', \Auth::guard('admin')->user()->id, 600);
            // 图片保存成功的话
            if ($result) {
                $data['file_path'] = $result['path'];
                $data['msg']       = "上传成功!";
                $data['success']   = true;
            }
        }
        log::info($data);
        return $data;
   }
}

Route::post('uploadFile', 'UploadsController@uploadImg')->name('uploadImg');

6. 效果

本作品采用《CC 协议》，转载必须注明作者和本文链接