Laravel 9 - Summernote.js Editor
Laravel 9 - Summernote.js Editor
In this tutorial, we are going to discuss how to integrate the Summernote JS editor in Laravel 9. Summernote is great for adding a WYSIWYG (What You See Is What You Get) editor to forms, especially when creating blogs, articles, or rich-text content. It's useful because it provides an easy, intuitive interface for formatting content without needing to write HTML manually.
If you're a video person, feel free to skip the post and check out the video instead!
Step # 1 : Create fresh Laravel Project or use an existing Laravel project.
Two commands to create fresh Laravel project.
Global Command : laravel new summernote
Or use
Non Global Command : composer create-project laravel/laravel --prefer-dist summernote
Step # 2 : Access the project.
Open a terminal (e.g., Git Bash) and navigate to your Laravel project's root folder.
Git Bash : cd c:xampp/htdocs/summernote
Run the Laravel Vite development server. Install the required dependencies and start the Vite server for front-end assets.
Command : npm install && npm run dev
Open a new Git Bash window or tab, and navigate to the same project directory to run further Laravel commands.
Step # 3 : Create a view named summernote.blade.php.
(resources/views/summernote.blade.php)
Paste the below HTML that includes Bootstrap 4 CDN, jQuery CDN, Popper.js CDN, and Summernote CDN compatible with Bootstrap 4
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 9 - Summernote Editor Example - Code Shotcut</title>
<!-- Bootstrap 4 CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper.js CDN (for Bootstrap tooltips, popovers) -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Summernote CSS (Bootstrap 4 version) -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<!-- Summernote JS (Bootstrap 4 version) -->
<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-7 offset-3 mt-4">
<h2>Laravel 9 - Summernote - Code Shotcut</h2>
<div class="card-body">
<!-- Form to handle Summernote editor content -->
<form method="POST" action="">
@csrf
<div class="form-group">
<!-- Summernote text area -->
<textarea class="form-control" name="summernote" id="summernote"></textarea>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-danger btn-block">Save</button>
</form>
</div>
</div>
</div>
</div>
<!-- Summernote initialization script -->
<script>
$('#summernote').summernote({
placeholder: 'Hello Bootstrap 4',
tabsize: 2,
height: 100
});
</script>
</body>
</html>
If you're using Bootstrap 4, include the Summernote CDN that supports Bootstrap 4. Likewise, if you're using Bootstrap 5, ensure you're using the Summernote CDN compatible with Bootstrap 5 for smooth integration.
Step # 4 : Create a route to return a view.
Route::get('/editor', function(){
return view('summernote');
});
Step # 5 : It's time to test.
Run the Laravel server.
Command : php artisan serve
Access url 127.0.0.0:8000/editor
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments