如何在 Laravel 教學中使用 CKeditor 上傳圖片

本教學示範如何在 Laravel 11 中使用 CKEditor 實現圖片上傳功能。

CKEditor 是一款基於 Web 的開源所見即所得 (WYSIWYG) 編輯器，可讓使用者在瀏覽器中編輯文字內容。它是一個強大的工具，使用戶能夠創建和格式化文字、添加圖像和多媒體以及編輯 HTML 程式碼，無需任何編碼知識。 CKEditor 於 2003 年首次發布，由於其多功能性和易用性，已成為 Web 開發人員和內容創作者的熱門選擇。它使用 JavaScript 編寫，可以輕鬆整合到任何 Web 應用程式中。

在本例中，我們將建立一個簡單的 CKEditor 實例，該實例具有圖片上傳選項，該選項將圖片儲存到本機儲存。我們將設定兩條路由，一條用於 GET 請求，另一條用於 POST 請求（用於圖片上傳）。用戶選擇圖片並提交後，圖片將儲存在「media」資料夾中。您也可以學習 Laravel 11 CORS 中介軟體設定範例。

Laravel 11 中使用 CKEditor 上傳圖片的範例

步驟 1：安裝 Laravel 11

首先，我們需要使用以下命令來取得一個新的 Laravel 11 版本應用程序，因為我們是從頭開始的。因此，打開您的終端機或命令提示字元並執行以下命令：

<code class="language-bash">composer create-project laravel/laravel example-app</code>

步驟 2：建立路由

在此步驟中，我們將在 routes/web.php 檔案中新增三個具有 GET 和 POST 方法的路由。讓我們添加它。

routes/web.php

<code class="language-php"><?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CkeditorController;

Route::get('ckeditor', [CkeditorController::class, 'index']);
Route::post('ckeditor/upload', [CkeditorController::class, 'upload'])->name('ckeditor.upload');
?></code>

步驟 3：建立控制器

在此步驟中，我們必須建立一個名為 CkeditorController 的新控制器，其中包含 index() 和 update() 方法。

請確保您已在您的 public 目錄中建立了 media 資料夾，因為圖片將儲存在該資料夾中。了解更多...

以上是如何在 Laravel 教學中使用 CKeditor 上傳圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！