In this tutorial you will learn about the How to Install and Use Summernote Editor in Laravel 8 and its application with practical example.
In this How to Install and Use Summernote Editor in Laravel 8 Tutorial I’ll show you how to install and use Summernote editor in laravel 8. In this tutorial you will learn to install and use Summernote editor in laravel 8. In this example I will show you how to directly use Summernote editor without and laravel package in laravel blade view file. We will not going to install and laravel package to install and use Summernote editor. We will directly integrate Summernote editor using summernote javascript libraries and css files.
How to Install and Use Summernote Editor in Laravel 8
In this step by step tutorial I will demonstrate you how to install and use summernote editor in laravel 8 application without any summernote package. Please follow the instruction given below:
- Install Laravel Project
- Install Summernote Editor
- Display Summernote Editor
Install Laravel Project
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
1 |
composer create-project laravel/laravel laravel-summernote-editor --prefer-dist |
Use the following command to switch into the project directory.
1 |
cd laravel-summernote-editor |
Install Summernote Editor in Laravel
Now, we will use the following javascript libraries and css files
1 2 3 4 5 6 7 8 |
<!-- include libraries(jQuery, bootstrap) --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <!-- summernote css/js --> <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> |
Display Summernote Editor in Laravel 8
Now put the following code in views/home.blade.php blade view file.
views/home.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel Summernote Editor Example</title> <!-- include libraries(jQuery, bootstrap) --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-7 offset-3 mt-4"> <div class="card-body"> <form method=”POST” action=""> @csrf <div class="form-group"> <textarea class="form-control" name="summernote" id="summernote"></textarea> </div> <button type=”submit” class="btn btn-danger btn-block">Save</button> </form> </div> </div> </div> </div> </body> <!-- summernote css/js --> <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> <script type="text/javascript"> $('#summernote').summernote({ height: 400 }); </script> </html> |
Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
1 |
php artisan serve |
Now, open the following URL in browser to view the Summernote Editor integration example