In this article, I will show you how to install and use Trix Editor in laravel 11 application. we will use image upload with trix editor in laravel 11.

Trix Editor is a lightweight, rich text editor for the web, developed by Basecamp. Designed for simplicity and ease of use, it offers essential text formatting features like bold, italics, links, and lists, without overwhelming users with options. It’s built with modern web technologies and integrates seamlessly into web applications, providing a clean, intuitive interface for creating and editing content. You Can Learn How to Image Upload with CKeditor in Laravel 11 Tutorial

In this example, we will create a simple use Trix editor with an image upload option that saves the image to local storage. We will set up three routes, we create one POST route to upload image. Once the user selects an image and submits it, the image will be stored in the ‘media’ folder.

Step 1: Install Laravel 11

First of all, we need to get a fresh Laravel 11 version application using the command below because we are starting from scratch. So, open your terminal or command prompt and run the command below:

composer create-project laravel/laravel example-app

Step 2: Create Route

In this step, we will add three routes with GET and POST method in routes/web.php file. so let’s add it.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\TrixController;

Route::get('trix', [TrixController::class, 'index']);
Route::post('trix/upload', [TrixController::class, 'upload'])->name('trix.upload');
Route::post('trix/store', [TrixController::class, 'store'])->name('trix.store');

Step 3: Create Controller
In this step, we have to create new controller as TrixController with index() and update() methods.

Make sure you have created media folder in your public directory because images will store on that folder.

so let’s update follow code:

Read Full Tutorials