DEV Community

Cover image for How to Install and Use Trix Editor in Laravel 11
Saddam Hossain
Saddam Hossain

Posted on

How to Install and Use Trix Editor in Laravel 11

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
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay