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!
Quick Overview
In this guide, we walk you through integrating the Summernote WYSIWYG editor into a Laravel 9 application. We begin by setting up a fresh Laravel project using the Laravel installer or Composer. After preparing the environment, we install frontend dependencies and launch Vite to enable live browser updates. We then create a Blade view containing the full Summernote setup, including Bootstrap 4, jQuery, and all required CDNs. A simple form with a <textarea> is enhanced into a rich text editor using Summernote’s JavaScript initialization. Next, we define a route to serve the editor view and ensure it's accessible via the browser. Finally, we start the Laravel development server and test the integration by visiting the editor page. If all assets are correctly loaded, you’ll see a fully functional Summernote editor ready for content input.
Step # 1 : Set Up Your Laravel 9 Project for Summernote Integration.
To begin integrating Summernote, a rich text editor, into your Laravel project, make sure you have Laravel 9 installed. You can start a new project using the Laravel installer.
laravel new summernote
Or using Composer.
composer create-project laravel/laravel --prefer-dist summernote
This step sets up the core Laravel framework you'll be working in. Once the installation finishes, your development environment is ready to proceed with adding Summernote and handling front-end styling and assets. Be sure everything is installed cleanly and that the folder structure has been generated correctly before continuing.
Step # 2 : Access the Laravel Project and Start the Vite Server.
Open a terminal (like Git Bash) and navigate to your Laravel project's root directory.
cd c:xampp/htdocs/summernote
Next, install the required frontend dependencies and start the Vite development server.
npm install && npm run dev
Once Vite is running, open a new terminal window or tab and navigate to the same project directory, this will allow you to run additional Laravel commands without interrupting the frontend server.
Step # 3 : Create a View.
Inside your Laravel project, navigate to the resources/views directory and create a new Blade file named summernote.blade.php. In this file, paste the full HTML structure provided below. It includes Bootstrap 4, jQuery, Popper.js, and Summernote, all via CDN links to ensure compatibility. The layout contains a simple form with a textarea element that will be enhanced by Summernote into a full WYSIWYG editor. At the bottom of the page, you’ll find a script block that initializes Summernote with a placeholder, a tab size of 2, and a height of 100 pixels.
<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 working with Bootstrap 4, be sure to use the Summernote CDN that's designed to support it, as it includes the correct styles and JavaScript dependencies tailored to Bootstrap 4’s structure and components. Similarly, if your project uses Bootstrap 5, you’ll need to include the Summernote version that’s compatible with Bootstrap 5 to maintain consistent design and full editor functionality. Mismatching these versions can lead to broken layouts, misaligned toolbar buttons, or even non-functional features like dropdowns and modals within the editor. Always match your Summernote and Bootstrap versions to avoid unnecessary bugs and ensure a smooth editing experience.
Step # 4 : Create a Route to Return the View.
To make the Summernote editor accessible in the browser, you need to define a route that loads the Blade view we created earlier. Routes in Laravel are defined in the routes/web.php file and are responsible for mapping URLs to specific logic or views. Open the routes/web.php file and add the following route.
Route::get('/editor', function(){
return view('summernote');
});
The GET route listens for requests made to /editor and returns the summernote.blade.php view located in the resources/views directory. This setup allows you to preview the Summernote editor in the browser by visiting: http://localhost:8000/editor. Once the page loads, you’ll see the fully functional Summernote WYSIWYG editor inside your Laravel application. This step is essential for confirming that your front-end assets (like Bootstrap, jQuery, and Summernote) are properly loaded and that the integration is working as expected. Later, this route can be replaced or enhanced to support dynamic content loading, saving form data to a database, or posting to a controller.
Step # 5 : It's Time to Test.
Now that the route and view are set up, let’s run the Laravel development server to test the Summernote editor in action. In your terminal, run the following command.
php artisan serve
Once the server is running, open your browser and navigate to: http://127.0.0.1:8000/editor. You should see the Summernote WYSIWYG editor loaded within your Laravel view. If everything is set up correctly, you’ll be able to type, style text, and use the formatting tools provided by Summernote. This confirms that the integration with Bootstrap 4 and Summernote is working as expected.
Conclusion
By following this guide, you’ve successfully integrated the Summernote WYSIWYG editor into your Laravel 9 application using Bootstrap 4 and CDN-based assets. You set up a fresh Laravel project, configured the frontend environment with Vite, created a dedicated Blade view, and tested the editor using a browser route. The Summernote editor is now fully functional and ready to enhance your forms with rich text input. This basic integration is just the beginning.
For more advanced use cases like image uploads, content validation, autosave, or saving editor data to a database, you can extend this setup using Laravel’s form handling, validation, and controller features. Be sure to explore the official Summernote documentation for deeper customization options, and refer to the Laravel documentation for best practices in handling forms, routes, and server-side logic.
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