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 我還沒有研究成功,等到時候完成再來補上作法。

總結

讓我們重新順過一次流程

  1. 安裝 CKEditor
  2. 套用 CKEditor
  3. 設定 filebrowser 網址為 laravel-filemanager
  4. 設定 middlewares 為 admin
  5. 關閉 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

Summary
Laravel CKEditor 整合 Laravel file manager
Article Name
Laravel CKEditor 整合 Laravel file manager
Description
如何在 Laravel 中使用 CKEditor 整合 Larvel file manger 並直接在編輯器當中直接上傳圖片至網站中
Author
Publisher Name
一群棒子

Facebook 功能: