Laravel 9 Integrate Summernote Editor Example Tutorial

Laravel 9 Integrate Summernote Example; Using this Tutorial we show you how to install and use Summernote Editor in Laravel. In modern time we need to use rich textarea editors in our laravel application so the Summernote WYSIWYG editor is a best wide range use and very popular.

Talking about text-editors, there are many best Editors in modern time but the summernote editor best all of them and easy to using in laravel project.

Summernote provide listing, image upload, link, font style, bold, italic etc. If you are using summernote editor in your laravel project then we have added some code for displaying the editor and how your show this content in your blade file.

How to Install and Use Summernote in Laravel

Use to follow the following steps to install and use summernote editor in laravel apps;

Step 1: Install Laravel App
Step 2: Connect App to Database
Step 3: Create Model and migration File
Step 4: Make Routes
Step 5: Create Controller
Step 6: Create Blade File
Step 7: Run Development Server

Step 1: Install Laravel App

In the beginning, open a terminal window and use the suggested command to create a fresh laravel application:

composer create-project --prefer-dist laravel/laravel laravel-summernote-example

Go inside the app:

cd laravel-summernote-example

Step 2: Connect Database to App

Next, insert database details in .env config file, it makes the laravel connection with the database:

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=database name here
 DB_USERNAME=database username here
 DB_PASSWORD=database password here

Step 3: Create Model and Migration File

In this step, create a migration for post table and post Model in laravel app. So run the following command on command prompt:

php artisan make:model Post -m

Next, Navigate to database/migrations and open create_posts_table.php then put the following code on it;

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

Now run the migration command for generating new posts table in database:

php artisan migrate

After that go to App/Models directory and open Post.php model file then add the following code in it;

<?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'];
 
}

Step 4: Make Routes

Now you need to create routes go in routes/web.php. Then add the following routes into web.php file, as follow:

use App\Http\Controllers\PostController;

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

Step 5: Create Controller

In this step, execute the following command to create one controller file name PostController.php:

php artisan make:controller PostController

After running this command you will find new file in this path “app/Http/Controllers/PostController.php”. Open the file and put the below code on it:

<?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('view',compact('post'));
    }
}

Step 6: Create Blade Files

In this step, go to resources/views folder and create 2 blade views that named view.blade.php and create.blade.php the file inside this folder.

Then open create.blade.php file and update the following code, as follows:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Summernote Editor in Laravel with Coding Driver</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
</head>
<body>

<div class="container mt-4">
  <h2>Summernote Editor in Laravel with- <a href="https://codingdriver.com/">codingdriver.com</a></h2>
    <form method="post" id="upload-image-form" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label><strong>Title :</strong></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">
          <button type="submit" class="btn btn-success">Upload</button>
        </div>

    </form>
</div>

<script>
    $(document).ready(function() {
      $('.summernote').summernote();
    });

</script>
</body>
</html>

Now open view.blade.php file and update the following code, as follows:

<!DOCTYPE html>
<html>
<head>
  <title>Use Summernote Editor In Laravel - Tutsmake.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 - Tutsmake.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>

Step 7: Run Development Server

Finally, run the following php artisan command to start development server:

php artisan serve

Now, open your browser and hit the following URL on it:

http://localhost:8000/posts

Finally Laravel Integrate Summernote Example Tutorial is completed now. You have learned how to install and use Summernote Editor in Laravel Application with example;