laravel5.1 -- Integrate FileManager and CKeditor into laravel

FileManager中文名叫文件管理器，也叫文件浏览器，它给我们提供了一个可视化的界面来管理文件和文件夹。利用FileManager，我们可以对文件进行浏览、增加、打印、修改(文件属性)、重命名、搜索等等一大堆非常有用的操作。
CKeditor相信朋友们都非常熟悉了，它是一种富文本编辑器，不再赘述。
现在我们来演示如何将FileManager和CKeditor整合到laravel中去。

Install FileManager

Require filemanater

将filemanager加入到composer.json中我们用bestmomo/filemanager

require : {
        "laravel/framework": "5.2.*",
        "bestmomo/filemanager": "1.1.*"
    }

Update Composer

$ composer update

更新完成后，将service provider加入到config/app.php中

 /**
 * App/Config/App.php
 */

Bestmomo\Filemanager\FilemanagerServiceProvider::class,

发布

$ php artisan vendor:publish --provider="Bestmomo\Filemanager\FilemanagerServiceProvider"

在User模型中添加2个权限方法

/**
* App/Http/Models/User.php
*/

    /**
    * Check media all access
    *
    * @return bool
    */
    public function accessMediasAll(){
    
        return $this->role->slug == 'admin';
    }

    /**
     * Check media access one folder
     *
     * @return bool
     */
    public function accessMediasFolder()
    {
        return $this->role->slug != 'user';
    }

添加路由与方法

模型配置完了，就需要添加路由和控制器的方法了

路由

// route.php

Route::get('medias', ['as'=>'medias', 'uses'=>'Admin\AdminController@filemanager']);

配置文件

新建配置文件medias.php来配置引入的filemanager目录

// Config/medias.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Url for filemanager
    |--------------------------------------------------------------------------
    */

    'url' => 'filemanager/index.html',
    'url-files' =>'/public/filemanager/userfiles/'

];

方法

在控制器AdminController中我们添加filemanager方法

    /**
    * Show the media panel
    *
    * @return Response
    */
    public function filemanager(){
        $url = config('medias.url') . '?langCode=' . config('app.locale');

        return view('backend.filemanager')->with(compact('url'));
    }

filemanager.blade.php模板

@extends('backend.layout.master')

@section('head')

    <style type="text/css">

        .iframe-responsive-wrapper {
            position: relative;
        }

        .iframe-responsive-wrapper .iframe-ratio {
            display: block;
            width: 100%;
            height: auto;
        }

        .iframe-responsive-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        #page-wrapper {
            background-color: #222;
        }

        .page-header {
            color: #ddd;
        }

    </style>

@stop

@section('main')

    @include('backend.partials.entete', ['heading' => trans('backend/medias.dashboard'), 'operation'=>'', 'symbol' => 'file-image-o', 'superior' => trans('backend/medias.medias')])

    <div class="iframe-responsive-wrapper">
        <img class="iframe-ratio" src="data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7"/>
        <iframe scrolling="no" src="{!! url($url) !!}" width="640" height="360" frameborder="2" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>

@stop

到了这里，整个FileManager就整合到了laravel中，但我在实际运行中，报了一个小错误：
call_user_func_array() expects parameter 1 to be a valid callback, class 'Kbwebs\MultiAuth\Guard' does not have a method 'accessMediasAll'
说是'Kbwebs\MultiAuth\Guard'没有accessMediasAll方法。
原因是我在laravel5.1中做了多用户验证功能，安装了'Kbwebs\MultiAuth\Guard'插件，所以在所有要获取User模型的时候都要加上一个user()， 比如 Auth::user->user(), auth()->user()->user()

解决方法：

找到有accessMediaAll和accessMediasFolder的文件/filemanager/connectors/php/default.config.php

<?php
/**
 *  Filemanager PHP connector
 *  This file should at least declare auth() function 
 *  and instantiate the Filemanager as '$fm'
 *  
 *  IMPORTANT : by default Read and Write access is granted to everyone
 *  Copy/paste this file to 'user.config.php' file to implement your own auth() function
 *  to grant access to wanted users only
 *
 *  filemanager.php
 *  use for ckeditor filemanager
 *
 *  @license  MIT License
 *  @author   Simon Georget <simon (at) linea21 (dot) com>
 *  @copyright  Authors
 */

// Laravel init
require getcwd() . '/../../../../bootstrap/autoload.php';
$app = require_once getcwd() . '/../../../../bootstrap/app.php';

$kernel = $app->make('Illuminate\Contracts\Http\Kernel');

$response = $kernel->handle(
  $request = Illuminate\Http\Request::capture()
);

$id = $app['encrypter']->decrypt($_COOKIE[$app['config']['session.cookie']]);
$app['session']->driver()->setId($id);
$app['session']->driver()->start();

// Folder path
$folderPath = config('filemanager.folder_path');   

// Check if user in authentified
if(!$app['auth']->check()) 
{
  $laravelAuth = false;
} 
else 
{ //print_r($app['auth']->user()->user()->accessMediasAll());exit;
  // Check if user has all access
  if($app['auth']->user()->accessMediasAll())
  {
    $laravelAuth = true; 
  } 
  elseif(method_exists($app['auth']->user(), 'accessMediasFolder'))
  {  
    // Check if user has access to one folder
    if($app['auth']->user()->accessMediasFolder())
    { 
      // Folder name with user id
      $folderPath .= 'user' . $app['auth']->id();
      $laravelAuth = true;  
    } 
    else
    {
      $laravelAuth = false;
    }    
  }
  else
  {
    $laravelAuth = false;
  } 
}

分别将
$app['auth']->user()->accessMediasAll()
$app['auth']->user()
$app['auth']->user()->accessMediasFolder()
$app['auth']->id()
改为
$app['auth']->user()->user()->accessMediasAll()
$app['auth']->user()->user()
$app['auth']->user()->user()->accessMediasFolder()
$app['auth']->user()->id()

FileManager界面

上面的代码更新完成后，已经可以看到FileManager的文件管理界面

引入CKeditor

下载CKeditor并解压到public文件夹后，在页面中引入ckeditor/ckeditor.js

<script src="{{ URL::asset('ckeditor/ckeditor.js') }}"></script>

CKEDITOR.replace( 'summary');   

config['height'] = 400;        

CKEDITOR.replace( 'content');

如果要实现ckeditor从FileManager中导入文件，则需要修改filebrowserBrowseUrl选项

    var config = {
    filebrowserBrowseUrl : '/filemanager/index.html'
    }
    
    CKEDITOR.replace( 'summary', config);

    config['height'] = 400;        

    CKEDITOR.replace( 'content', config);

ckeditor上传图片的效果图