Laravel Examples
Integrate Summernote Editor into a Laravel Project
- Last updated Apr 25, 2024
In this tutorial, we will guide you through the process of integrating the Summernote editor into a Laravel project.
To integrate Summernote into a Laravel project, you can follow these general steps:
Check Bootstrap version
Confirm that Bootstrap 5 is installed and correctly configured in your Laravel project. If it's not already installed, you can use the following command to install it:
npm install bootstrap@5.2.3
Install Summernote
There are different ways to install Summernote, but a clean approach is to download the Summernote CSS and JS files directly from the CDN using your browser and save them locally with the same file names.
To use Summernote with Bootstrap 5.x.x, include summernote-bs5.min.js and summernote-bs5.min.css into your Laravel project.
- To include the summernote-bs5.min.css file in your project, create a new file with the same name (summernote-bs5.min.css) in the public/css/ directory. Visit https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css in your browser, and copy the entire content into the public/css/summernote-bs5.min.css file.
- To include the summernote-bs5.min.js file in your project, create a new file with the same name (summernote-bs5.min.js) in the public/js/ directory. Visit https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js in your browser, and copy the entire content into the public/js/summernote-bs5.min.js file.
Install JQuery
Summernote requires JQuery. Make sure to include the lastest version of jQuery from a local file. Visit https://code.jquery.com/jquery-3.7.1.min.js in your browser, and copy the entire content into the public/js/jquery.js file.
Install Bootstrap Bundle
Summernote's dropdown functionality requires the inclusion of bootstrap.bundle.min.js version 4.5.3. Ensure that you use version 4.5.3, as the latest version will not be compatible for Summernote with Bootstrap 5.
To include the bootstrap.bundle.min.js file in your project, create a new file with the same name (bootstrap.bundle.min.js) in the public/js/ directory. Visit https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js in your browser, and copy the entire content into the public/js/bootstrap.bundle.min.js file.
Include Summernote in Your Blade File
Modify your Blade file to include Summernote files and editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Summernote Editor with Laravel Example</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<!--app.scss and app.js should include bootstrap 5-->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<!--summernote css file for bootstrap 5-->
<link href="{{ asset('css/summernote-bs5.min.css') }}" rel="stylesheet">
<style>
/* Set the font size and font family of the Summernote editor */
.note-editable {
font-size: 17px !important;
font-family: Arial, Verdana, Tahoma;
}
/** for code feature */
pre {
display: block;
padding: 15px;
margin-top: 10px;
margin-bottom: 30px;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
word-break: normal;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 4px;
overflow: auto;
}
</style>
</head>
<body>
<div style="width:1000px; margin-top:50px; margin-left: auto; margin-right: auto; width: 60%;">
<!--Adding summernote text editor-->
<textarea type="text" name="description" data-name="description" id="editor"></textarea>
</div>
<!--Including JQuery for summernote-->
<script src="{{ asset('js/jquery.js') }}"></script>
<!--Including bootstrap.bundle.min.js of old version to enable dropdown-->
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
<!--Including summernote-bs5.min.js with support of bootstrap 5-->
<script src="{{ asset('js/summernote-bs5.min.js') }}"></script>
<!--Initializing summernote-->
<script>
$(document).ready(function() {
$('#editor').summernote({
csrf: true,
placeholder: 'Type description here...',
tabsize: 100,
height: 500,
focus: true,
codemirror: {
theme: 'monokai'
},
fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36', '48', '64'],
toolbar: [
['style', ['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']],
],
});
$('.dropdown-toogle').dropdown(); //enabling menu dropdown in editor
});
</script>
</body>
</html>