Integrate Froala Rich Text Editor in Laravel

showkat ali
Jul 10, 2024
0 Comments
Like 0
631 View

How to Integrate Froala Rich Text Editor in Laravel: Step-by-Step Guide

When developing a web application, including a rich text editor can significantly improve the user experience by offering intuitive and powerful text formatting options. Froala is one of the most popular rich text editors, thanks to its sleek design and robust functionality. In this guide, we will show you how to integrate Froala Rich Text Editor into a Laravel project without using NPM and keep it responsive.

Why should you use the Froala Rich Text Editor?

Froala Editor provides a wide range of features, including:

Intuitive User Interface: Users can format text easily.
Responsive design: It looks great on any device.
Extensive Toolbar Options: Choose from a variety of text formatting tools.
Plugin Support: Add more plugins to enhance functionality.

Prerequisites

Before we begin, please ensure you have the following:

A Laravel project was set up. If you don't have one, you can create one using the command:composer create-project --prefer-dist laravel/laravel froala-example.
Basic knowledge of Laravel and its structure.

Step 1: Setting Up Your Laravel Project

First, ensure your Laravel project is up and running. If you don’t have a Laravel project yet, create one by running:

composer create-project --prefer-dist laravel/laravel froala-example
cd froala-example

Step 2: Create Routes, Controllers, and Views

Create Routes

Open routes/web.php and add routes to display the editor form and handle form submissions:

use App\Http\Controllers\EditorController;

Route::get('/editor', [EditorController::class, 'showEditor']);
Route::post('/editor', [EditorController::class, 'saveContent'])->name('saveContent');

Create a Controller

Generate a new controller using the Artisan command:

php artisan make:controller EditorController

Openapp/Http/Controllers/EditorController.php and add the methods to display the form and save the content:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class EditorController extends Controller
{
    public function showEditor()
    {
        return view('editor');
    }

    public function saveContent(Request $request)
    {
        $content = $request->input('content');
        DB::table('contents')->insert(['content' => $content]);
        
        return back()->with('success', 'Content saved successfully!');
    }
}

Create a View

Create a view file named editor.blade.php in the resources/views/ directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Froala Editor in Laravel</title>
    <!-- Froala Editor CSS files -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.12/css/froala_editor.pkgd.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.12/css/froala_style.min.css">
    <!-- Custom CSS for responsive design -->
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
        }
        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90%;
            max-width: 800px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        textarea {
            width: 100%;
            height: 300px;
            margin-bottom: 10px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    @if(session('success'))
        <div>{{ session('success') }}</div>
    @endif

    <form method="POST" action="{{ route('saveContent') }}">
        @csrf
        <textarea name="content" id="froala-editor"></textarea>
        <button type="submit">Save</button>
    </form>

    <!-- Froala Editor JS files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.12/js/froala_editor.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.12/js/plugins.pkgd.min.js"></script>

    <!-- Initialize Froala Editor with all free toolbar buttons and plugins -->
    <script>
        new FroalaEditor('#froala-editor', {
            toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'help', 'html', '|', 'undo', 'redo'],
            pluginsEnabled: ['align', 'charCounter', 'codeBeautifier', 'codeView', 'colors', 'draggable', 'emoticons', 'entities', 'file', 'fontFamily', 'fontSize', 'fullscreen', 'image', 'imageTUI', 'inlineStyle', 'lineBreaker', 'link', 'lists', 'paragraphFormat', 'paragraphStyle', 'print', 'quickInsert', 'quote', 'save', 'specialCharacters', 'table', 'url', 'video'],
            heightMin: 200,
            heightMax: 400
        });
    </script>
</body>
</html>

Step 3: Migrate Database

You need a table to store the content. Create a migration for the contents table.

php artisan make:migration create_contents_table

https://www.interviewsolutionshub.com/

Open the migration file in database/migrations/ and define the table structure:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateContentsTable extends Migration
{
    public function up()
    {
        Schema::create('contents', function (Blueprint $table) {
            $table->id();
            $table->text('content');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('contents');
    }
}

Run the migration:

php artisan migrate

Step 4: Making the Editor Responsive

To ensure the Froala Editor is responsive, we have used CSS Flexbox in our view file (editor.blade.php). This will center the form on the page and adjust its size based on the screen width.

Step 5: Testing Your Setup

Run your Laravel server.

php artisan serve

Visit http://localhost:8000/editor in your browser. You should see the Froala editor with all the free toolbar buttons and plugins enabled. You can enter content and save it to the database.

Conclusion

Integrating Froala Rich Text Editor into your Laravel project via a CDN is simple and requires little configuration. Following the steps in this guide will allow you to improve your application with a powerful text editor while also ensuring that it looks great on all devices.

You can give users an exceptional content editing experience by combining Froala and Laravel features. If you have any questions or require additional assistance, please do not hesitate to contact us!

Happy coding!