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.

  1. 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.
  2. 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>