Laravel-Adminでテキストエディタを設定し、画像アップロードを実装する
はじめに
ウェブサイトやアプリケーションでリッチなテキスト編集機能を実装する際、CKEditorは非常に有用なエディタです。特に、Enhanced Imageプラグインを使用すると、画像の挿入や編集が直感的かつ柔軟に行えます。
Enhanced Imageプラグインを使用するメリット
Enhanced Imageプラグインを導入することで、以下の利点が得られます：
-
画像の整列機能
画像を左寄せ、中央寄せ、右寄せなど、さまざまな位置に配置できます。 -
キャプション付き画像の挿入
画像に説明文（キャプション）を追加でき、画像とキャプションを一緒に移動・編集できます。
-
ドラッグ＆ドロップによる位置調整
エディタ内で画像をドラッグするだけで、簡単に位置を変更できます。 -
クリック＆ドラッグでのサイズ変更
画像のサイズをマウスで直感的に調整できます。
-
ファイルブラウザとの統合
CKFinderなどのファイルブラウザと連携し、サーバー上の画像を簡単に挿入・管理できます。
1. ckeditorをインストールする
まず、Laravel-Admin用のckeditorをインストールします。
composer require laravel-admin-ext/ckeditor
次に、設定ファイルを出力します。
php artisan vendor:publish --tag=laravel-admin-ckeditor
2. Laravel-Adminの設定を編集する
config/admin.php を編集し、ckeditorを有効化します。
'extensions' => {
'ckeditor' => {
// 使用を有効化
'enable': true,
// エディタの設定
'config': {
// ここに設定を追加できます
}
}
}
これで、ckeditorが利用可能になります。
3. Enhanced Imageプラグインの導入
3.1 プラグインのダウンロード
CKEditorのバージョンに対応したプラグインをダウンロードします。CKEditorのバージョンは、ブラウザの開発者コンソールで CKEDITOR.version と入力することで確認できます。
対応するバージョンのプラグインを以下のリポジトリからダウンロードします。
3.2 プラグインの配置
ダウンロードしたプラグイン（ image2 ）を public/vendor/laravel-admin-ext/ckeditor/plugins ディレクトリに配置します。
３.3 プラグインの有効化
config/admin.php ファイルのCKEditorの設定に、プラグインを有効化する設定を追加します。
'ckeditor' => [
'enable' => true,
'config' => [
'extraPlugins' => 'image2', // 追加したプラグインを指定
]
]
]
4. 画像アップロードの設定
4.1 画像アップロード用のルートの追加
routes/admin.php ファイルに、画像アップロード用のルートを追加します。
use App\Admin\Controllers\UploadController;
Admin::routes();
Route::group([
'prefix' => config('admin.route.prefix'),
'namespace' => config('admin.route.namespace'),
'middleware' => config('admin.route.middleware'),
'as' => config('admin.route.prefix') . '.',
], function (Router $router) {
$router->post('/upload', [UploadController::class, 'index']);
});
4.2 アップロードコントローラの作成
app/Admin/Controllers/UploadController.php ファイルを作成し、以下の内容を記述します。
namespace App\Admin\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use App\Http\Controllers\Controller;
class UploadController extends Controller
{
public function index(Request $request)
{
$image = $request->file('upload');
$path = $image->store('images', 'public'); // 画像を保存
$url = Storage::url($path); // 画像のURLを取得
return response()->json([
'uploaded' => 1,
'fileName' => basename($path),
'url' => $url
]);
}
}
4.3 CSRFトークンの無効化
画像アップロード時にはCSRF保護が不要なので、app/Http/Middleware/VerifyCsrfToken.php に以下を追加して無効化します。
namespace App\\Http\\Middleware;
use Illuminate\\Foundation\\Http\\Middleware\\VerifyCsrfToken as Middleware;
class VerifyCsrfToken extends Middleware {
protected $except = {
'/admin/upload'
};
}
4.4 CKEditorの設定でアップロードURLを指定
CKEditorの設定に、画像アップロード用のURLを指定します。
'ckeditor' => [
'enable' => true,
'config' => [
'extraPlugins' => 'image2',
'filebrowserImageUploadUrl' => '/admin/upload',
]
]
]
5. フォームにエディタを設置する
管理画面のフォームにエディタを設置するには、以下のように記述します。
$form->ckeditor('content');
これだけで、投稿フォームにリッチテキストエディタが設置されます！
６. まとめ
これで、Laravel-Adminの投稿フォームにckeditorを導入し、Enhanced Imageで画像アップロード機能を追加できました！
- CKEditorをインストールし、Laravel-Adminで有効化
- Enhanced Imageプラグインを追加して、画像の柔軟な配置や編集を可能に
- アップロードルートとコントローラを作成し、画像をサーバーに保存
- セキュリティ対策（CSRF無効化）を考慮した実装
- フォームにCKEditorを適用し、投稿フォームをリッチにカスタマイズ
Laravel-Adminは便利な拡張機能が豊富なので、ぜひ活用してみてください！
参考資料
Discussion