筆記

Laravel CKEditor 整合 Laravel file manager

jimmy8646

2018年5月2日 • 4 min read

CKEditor 一直是我很愛用的編輯器，功能強大擴充套件也很多，設定也很詳細，在之前我使用的 CMS 內都已經有整合好 CKEditor 現在到了 Laravel 要接上這個功能還真是花了不少時間。

那麼終於處理好 CKEditor 之後有另一個需求，我該怎麼上傳檔案？不可能寫文章內容都不會有圖片吧，也不可能叫使用者自己去上傳檔案再貼網址到內容，這操作流程對使用者一點也不友善。

流程

安裝 CKEditor
將 CKEditor 套用到我們的 textarea
設定 CKEditor 上傳使用 Laravel file manager

安裝 CKEditor

如何安裝 CKEditor 網路上已經有很多教學了，我個人是使用 laravel-admin 當作我的管理後台，所以安裝 CKEditor 你也可以去看他的教學，在這邊只提出一些重點。

在之前你要先在你 blade 引入 CKEditor 的 js

接著套用到我們的 textarea 上語法如下

laravel-admin 的作法

$this->script = "$('textarea.{$this->getElementClassString()}').ckeditor(options);";

一般引入 的作法

CKEDITOR.replace('my-editor');

my-editor 要自行替換你的 <textarea name='my-editor'></textarea> 像這邊就對上 my-editor
如果引入成功就如下圖

整合 Laravel file manager

接著我們就可以開始安裝 Laravel file manager

 composer require unisharp/laravel-filemanager:~1.8

安裝詳細操作可以參考官方教學

修改程式讓 CKEditor 調用 laravel-filemanager

laravel-admin 的作法

$this->script = "
        var options = {
        filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
        filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images',
        filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
        filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files'
        };
        $('textarea.{$this->getElementClassString()}').ckeditor(options);
        ";

一般引入 的作法

var options = {
    filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
    filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images',
    filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
    filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files'
  };

$('textarea.my-editor').ckeditor(options);

當我們再回到 CKEditor 會看到我們的圖片已經有瀏覽上傳的按鈕

可是當你按下瀏覽伺服器就會看到 Route [login] not defined. 錯誤訊息

接著我們要來處理 middlewares 的問題打開設定 config/lfm.php

會看到

'middlewares' => ['web', 'auth'],
'url_prefix' => 'laravel-filemanager',

// 我們換成

'middlewares' => ['web', 'admin'],
'url_prefix' => '/admin/laravel-filemanager',

別忘了修改原本的網址設定

filebrowserImageBrowseUrl: '/admin/laravel-filemanager?type=Images',
filebrowserImageUploadUrl: '/admin/laravel-filemanager/upload?type=Images',
filebrowserBrowseUrl: '/admin/laravel-filemanager?type=Files',
filebrowserUploadUrl: '/admin/laravel-filemanager/upload?type=Files'

我們將 middlewares 改成 admin 並且修改 url_prefix
就可以看到錯誤訊息 Trying to get property of non-object

如果有詳細看一下文檔會發現設定其實有 Multi-User Mode 剛剛的錯誤訊息是說不知道當前使用者是誰，所以會報錯。如果我們把多使用者關閉應該就可以看到介面了

// If true, private folders will be created for each signed-in user.
'allow_multi_user' => false,
// If true, share folder will be created when allow_multi_user is true.
'allow_share_folder' => false,

如果我們將網址複製，到無痕瀏覽器嘗試訪問網址，就會被我們的 middlewares 給擋下囉。

至於要啟用 Multi-User Mode 我還沒有研究成功，等到時候完成再來補上作法。

總結

讓我們重新順過一次流程

安裝 CKEditor
套用 CKEditor
設定 filebrowser 網址為 laravel-filemanager
設定 middlewares 為 admin
關閉 Multi-User Mode

如此一來應該就可以正常使用 laravel-filemanager 來整合上傳圖片功能，其實在網路上看了很多篇 CKEditor 上傳圖片的教學，可是每一篇的教學都都在 return 圖片網址出錯，只有自己嘗試了 laravel-filemanager 才成功，希望這篇筆記可以幫助到大家。

參考連結

Image Uploads with CKEditor and Laravel
How to enable image uploader in CKeditor 4 in Laravel 5
Laravel 5.2 使用ckeditor 及 ckfinder
New in QuickAdminPanel: Upload Files to CKEditor with Laravel-Filemanager Package