8bit yard
2 min readApr 7, 2021
how to use summernote editor in laravel

In this article we will discuss how to install summernote in laravel. you can
use summernote editor in laravel 5.8, laravel 6, laravel 7 and laravel 8.

Summernote is a JavaScript library that helps you create WYSIWYG editors online, Summernote is wide range use and very popular.

Summernote gives you many rich Features.

for more Summernote Documentation : https://summernote.org

I will give you simple example that will show you how to use Summernote editor in laravel application.

views/addNote.blade.php

<html>
<head>
<title>How to Use Summernote Editor with Laravel</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></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">
<div class="row">
<div class="col-md-8 offset-2 mt-5">
<div class="card">
<div class="card-header bg-primary">
<h6 class="text-white">How to Use Summernote Editor with Laravel</h6>
</div>
<div class="card-body">
<form method="post" action="" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Product Name</label>
<input type="text" name="p_name" class="form-control"/>
</div>
<div class="form-group">
<label>Product Description :</label>
<textarea class="summernote_dessription" name="p_description"></textarea>
</div>
<div class="form-group">
<label>Product Catalog :</label>
<textarea class="summernote_catalog" name="p_catalog"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-info btn-sm">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote_dessription').summernote();
$('.summernote_catalog').summernote();
});
</script>
</body>
</html>

routes/web.php

Route::get('/add-summernote','TestSummernoteController@Summernote')->name('add.summernote');

app/Http/Controllers/TestSummernoteController

public function Summernote()
{
return view('addNote');
}

Summernote css :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">

Summernote js :

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></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.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

show.blade.php

We will pass the model trough the controller in view,
use the following code for Removing html tags in Laravel blade

{!! $varaible->summernote_dessription !!}

YOU MIGHT ALSO LIKE :

How to show a message if data is null in laravel ?

8bit yard
8bit yard

Written by 8bit yard

0 Followers

8Bityard provide a collection of tutorials about PHP, Laravel Framework Mysql Database, Bootstrap, WordPress, Jquery. for more visit : www.8bityard.com