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

Tags

Recommended Posts

View All

Laravel 9 PHP Guzzle Http Client Examples

We will provide answers in this manual. If you've been searching the internet for a Laravel Guzzle http client example, your search is over.
Read More

Most Important Array Methods in JavaScript

Learn the most important array methods in JavaScript, including push, pop, shift, unshift, forEach, map, filter, reduce, and find. Improve your coding...
Read More

Laravel 8 Generate PDF File using DomPDF | Laravel 8 PDF

How to generate pdf from view, html, blade in laravel 8. Here, we would share with you how to generate pdf file from blade view in laravel 8
Read More

Laravel 9 FullCalendar Ajax Tutorial with Example

We&amp;#039;ll show you how to use the Fullcalendar JavaScript event calendar plugin to add FullCalendar to your Laravel app and create and cancel eve...
Read More

Laravel 9 generate RSS Feed Tutorial With Example

Learn how to generate RSS feeds in Laravel 9 with our easy-to-follow tutorial. Get step-by-step instructions and real-world examples. Start today!
Read More