Example of a tutorial for Laravel 9 summernote integration. We'll demonstrate how to set up and use Summernote in a Laravel 9 application in this article.

It's as simple as adding Summernote to the page where you want it to appear to add a Plugin to Summernote. When initialized, some plugins may additionally dynamically apply styles to the DOM. Usually, the Summernote Script is loaded first, then the Plugin Script. The majority of scripts are added to a normal HTML page's head section.

When building a product creation page, a post creation page, or any other page for a Laravel 9 application. You'll need a text editor at that point so you may insert HTML and other text. as well as saving information to a database table.

In order to use Summernote wysiwyg editor in your Laravel 9 apps, follow the instructions in this step-by-step example.

Table of Contents

  • Install Laravel 9 App
  • Connecting App to Database
  • Create Migration and Model File
  • Add Routes
  • Create Controller
  • Create Blade File
  • Run Development Server
  • Test App

Install Laravel 9 App

Open a terminal and use the following command to download or install the Laravel 9 app needed to implement the Summernote Editor in this step:

composer create-project --prefer-dist laravel/laravel blog

Connecting App to Database

Open the ".env" file in this step by navigating to the project root directory. Then, add the following database information to the.evn file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Create Migration and Model File

Create a migration for the post table and post model in the Laravel application in this phase. Therefore, enter the following command at the command prompt:

cd blog

php artisan make:model Post -m

Next, open create posts table.php by going to database/migrations. Then make the following updates to the file create posts table.php:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->longText('description');
        $table->timestamps();
    });
}

Run the following command on the command prompt after that:

php artisan migrate

In your database, this command will create tables.

Then, open the Post.php model file, located in the App/Models directory, and add the following code:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
 
    protected $fillable = ['title','description'];
 
}

Add Routes

Navigate to the routes folder and choose the web.php file in this step. Then, as follows, add the following routes to the web.php file:

use App\Http\Controllers\PayController;

Route::get('posts', [PostController::class, 'index']);
Route::post('posts', [PostController::class, 'store']);
Route::get('posts/{id}', [PostController::class, 'show']);

Create Controller

To create a single controller file with the name PostController.php, run the command below in this step:

php artisan make:controller PostController

After that, open the PostController.php file by going to app/http/controllers. Additionally, make the following updates to the PostController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Post;
 
class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('create');
    }
 
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $input = $request->all();
        Post::create($input);
        return redirect()->back();
    }
 
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        return view('display',compact('post'));
    }
}

Create Blade File

Navigate to the resources/views folder in this step. And in this folder, create 2 blade views with the names display.blade.php and create.blade.php.

After that, enter the create.blade.php file and make the following updates to the code:

<!DOCTYPE html>
<html>

<head>
    <title>How To Use Summernote Editor In Laravel 9 - CodeSolutionStuff.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-2 mt-5">
                <div class="card">
                    <div class="card-header bg-info">
                        <h6 class="text-white">Laravel Summernote Example Tutorial</h6>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ url('posts') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label>Title</label>
                                <input type="text" name="title" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label><strong>Description :</strong></label>
                                <textarea class="summernote" name="description"></textarea>
                            </div>
                            <div class="form-group text-center">
                                <button type="submit" class="btn btn-success btn-sm">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.summernote').summernote();
        });
    </script>
</body>

</html>

Update the following code in your list.blade.php file by opening the display.blade.php file and doing as follows:

<!DOCTYPE html>
<html>

<head>
    <title>Use Summernote Editor In Laravel - CodeSolutionStuff.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="showimages"></div>
            </div>
            <div class="col-md-6 offset-3 mt-5">
                <div class="card">
                    <div class="card-header bg-info">
                        <h6 class="text-white">Use Summernote Editor In Laravel - CodeSolutionStuff.com</h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered">
                            <tr>
                                <th>No.</th>
                                <th>Title</th>
                                <th>Description</th>
                            </tr>
                            <tr>
                                <td>{{ $post->id }}</td>
                                <td>{{ $post->title }}</td>
                                <td>{!! $post->description !!}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Run Development Server

Finally, launch the development server by running the following php artisan command:

php artisan serve

Test App

Open your browser now, then enter the following address into it:

http://localhost:8000/posts

Recommended Posts

View All

Laravel 9 Elasticsearch Integration From Scratch With Example


In this post, we'll talk about how to incorporate Elasticsearch from scratch using a Laravel 9 example.

Laravel 9 CKeditor Image Upload With Example


Learn how to easily upload images in CKEditor using Laravel 9 with this step-by-step tutorial and example code. Improve your web development skills no...

Building Smarter Web Applications with OpenAI for Laravel


In this tutorial, we'll explore how to use OpenAI in Laravel, and how it can help us build smarter, more efficient web applications.

Laravel 9 Razorpay Payment Gateway Integration Example


razorpay payment gateway integration in laravel 9, laravel 9 razorpay pay payment example, laravel 9 razorpay integration, razorpay integration in lar...

How To Create Url Shortener In Laravel 9 Application


How to create a URL shortener tool using Laravel 9's short URL package, similar to bit.ly or s.id.