在 Voyager 使用 CKEditor v4 及檔案總管

安裝 CKEditor v4，整合進 Voyager

CKEditor 提供「CDN 引入」及「下載至本機」兩種方式使用，前者設定方式最簡單，後者到官網下載區下載需要的版本後解壓縮到 public 資料夾內（預設資料夾名：ckeditor）。

CKEditor CDN 資源：https://cdn.ckeditor.com/

依照功能輸出可以選擇 Basic / Standard / Full 三個版本，一般使用選擇 Standard 就可以，如果做為長文章編輯則可考慮 Full 版。以下以「CDN 引入」方式說明導入流程：

先建立給 CKEditor 的 Handler：

<?php
// app/FormFields/CkeditorHandler.php

namespace App\\FormFields;

use TCG\\Voyager\\FormFields\\AbstractHandler;

class CkeditorHandler extends AbstractHandler
{
    protected $codename = 'CKEditor';

    public function createContent($row, $dataType, $dataTypeContent, $options)
    {
        return view('formfields.ckeditor', [
            'row'             => $row,
            'options'         => $options,
            'dataType'        => $dataType,
            'dataTypeContent' => $dataTypeContent,
        ]);
    }
}

接著建立給 CKEditor 使用的 Blade Template，這裡注意的是 textarea 標籤的 id 屬性與底下 CKEDITOR.replace的值要相同。

{{-- /resources/views/formfields/ckeditor.blade.php --}}

<textarea class="form-control" id="ckeditor" name="{{ $row->field }}">
    {!! old($row->field, $dataTypeContent->{$row->field} ?? '') !!}
</textarea>

<script src="//cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script>

<script>
    CKEDITOR.replace( 'ckeditor', options);
</script>

到 AppServiceProvider 註冊 Handler 後，就可以在 Voyager 的 BREAD 編輯欄位中看到 CKEditor 了。

<?php
// /app/Providers/AppServiceProvider.php

namespace App\\Providers;

use App\\FormFields\\CkeditorHandler;
use Illuminate\\Pagination\\Paginator;
use Illuminate\\Support\\ServiceProvider;
use TCG\\Voyager\\Facades\\Voyager;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        Voyager::addFormField(CkeditorHandler::class);
    }

安裝檔案管理套件，管理伺服器頁面檔案更方便

Voyager 提供了方便的媒體管理程式可以管理上傳至網站空間的檔案，不過之前在導入 Editor.md 的時候無法取用這項功能實在可惜。透過安裝 Laravel File Manager 套件可以讓 CKEditor 程式更方便上傳檔案，同時瀏覽伺服器上的文件，加上這個套件後線上編輯功能才算完整。

安裝 Laravel File Manager

用 composer 指令下載套件：

composer require unisharp/laravel-filemanager

發佈套件，將設定檔及資源檔案複製到 public 目錄：

php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public

建立同步連結，同時確保 storage 資料夾可以寫入。因為安裝 Voyager 的時候已經做過一次的關係跳過。

php artisan storage:link
chmod -R 777 storage

同步連結建立後會在 public 資料夾建立 storage 軟連結，導向 /storage/app/public。以預設設定（/config/lfm.php）的情況 Laravel File Manager 會建立兩個資料夾：一般檔案的「files」資料夾與圖片用的「photos」資料夾，底下再依上傳者的會員 ID 再細分。

編輯 .env，確認 APP_URL 屬性值是專案網址，在 Voyager 遇到圖片讀取錯誤時也是同樣解法。

在 /routes/web.php 加上上傳檔案路由：

Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () {
     \\UniSharp\\LaravelFilemanager\\Lfm::routes();
 });

接著瀏覽：專案網址/laravel-filemanager/demo 看看能否看到展示頁面，進行操作。

與編輯器整合

Laravel File Manager 可與常見的 WYSIWYG 編輯器整合，其中又以 CKEditor 的整合最簡單。在上述作業完成後回頭編輯 CKEditor 的 Blade template 檔案，加入 Laravel File Manager 敘述後是以下內容：

{{-- /resources/views/formfields/ckeditor.blade.php --}}

<textarea class="form-control" id="ckeditor" name="{{ $row->field }}">
    {!! old($row->field, $dataTypeContent->{$row->field} ?? '') !!}
</textarea>

<script src="//cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script>
<script>
    var options = {
        filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
        filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token=',
        filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
        filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token='
    };
</script>
<script>
    CKEDITOR.replace( 'ckeditor', options);
</script>

之後在 CKEditor 上傳檔案或圖片時可以點選「瀏覽伺服器」按鈕啟動 Laravel File Manager 進行檔案管理。

介面在地化

操作介面的翻譯檔位於 vendor/unisharp/laravel-filemanager/src/lang

將其複製為：

Laravel 8：/resources/lang/vendor/laravel-filemanager/<YOUR LANGUAGE>/lfm.php

Laravel 9：/lang/vendor/laravel-filemanager/zh_TW/lfm.php （正體中文） .

參考資料

• CKEditor 4 download
• Laravel File Manager
• Laravel File Manager: customization
• Laravel CKEditor 整合 Laravel file manager