LaravelチュートリアルでCKeditorを使用して画像をアップロードする方法

このチュートリアルでは、CKEditor を使用して Laravel 11 に画像アップロード機能を実装する方法を示します。

CKEditor は、ユーザーがブラウザーでテキスト コンテンツを編集できるオープン ソースの Web ベースの WYSIWYG エディターです。これは、ユーザーがコーディングの知識がなくても、テキストの作成と書式設定、画像やマルチメディアの追加、HTML コードの編集を可能にする強力なツールです。 2003 年に初めてリリースされた CKEditor は、その多用途性と使いやすさにより、Web 開発者やコンテンツ作成者の間で人気の選択肢となっています。これは JavaScript で書かれており、あらゆる Web アプリケーションに簡単に統合できます。

この例では、画像をローカル ストレージに保存する画像アップロード オプションを備えた単純な CKEditor インスタンスを作成します。 GET リクエスト用と POST リクエスト (画像アップロード用) の 2 つのルートを設定します。ユーザーが画像を選択して送信すると、その画像は「メディア」フォルダーに保存されます。 Laravel 11 CORS ミドルウェアの構成例を学ぶこともできます。

CKEditor を使用して Laravel 11 で画像をアップロードする例

ステップ 1: Laravel 11 をインストールする

最初に、最初から始めるので、次のコマンドを使用して、新しい Laravel 11 バージョンのアプリケーションを取得する必要があります。したがって、ターミナルまたはコマンド プロンプトを開き、次のコマンドを実行します:

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

ステップ 2: ルートを作成する

このステップでは、GET メソッドと POST メソッドを持つ 3 つのルートを routes/web.php ファイルに追加します。追加しましょう。

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 中国語 Web サイトの他の関連記事を参照してください。