Adding Quill Editor in Laravel 10 using Vite How to add Facebook Messenger to a Website Caching in Laravel 8/9/10 with Example Clearing Cache in Laravel 8/9/10 Programmatically Block IP Addresses in Laravel 8/9/10 Implementing Authentication in Laravel 8/9 using Bootstrap UI Install Composer How to Deploy a Laravel Project on CPanel Integrate Summernote Editor into a Laravel Project Fixing Summernote Dropdown issue with Bootstrap 5

Fixing Summernote Dropdown issue with Bootstrap 5

Last updated Apr 25, 2024

If you're integrating the Summernote editor with Bootstrap 5 and facing problems with the dropdown functionality within the editor, you've landed in the right spot. This tutorial will walk you through the steps to resolve this issue.

To resolve the dropdown issue in the Summernote editor with Bootstrap 5, avoid using the latest version of bootstrap.bundle.min.js; instead, opt for an older version (Bootstrap 4). Below is the CDN link for bootstrap.bundle.min.js that you can include in your blade file:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Here's the complete code:

<!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() }}">

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    
    <!--Including bootstrap.min.css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
     <!--Including summernote-bs5.min.css for bootstrap 5 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css" integrity="sha512-ngQ4IGzHQ3s/Hh8kMyG4FC74wzitukRMIcTOoKT3EyzFZCILOPF0twiXOQn75eDINUfKBYmzYn2AA8DkAk8veQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <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 bootstrap.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    <!--Including jquery required for summernote-->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!--Summernote dropdown issue FIXED : including version 4.5.3 of bootstrap.bundle.min.js. Latest version will not work-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <!--Including summernote-bs5.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js" integrity="sha512-6F1RVfnxCprKJmfulcxxym1Dar5FsT/V2jiEUvABiaEiFWoQ8yHvqRM/Slf0qJKiwin6IDQucjXuolCfCKnaJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>

Laravel Examples

Fixing Summernote Dropdown issue with Bootstrap 5