How to integrate Summernote in Bootstrap 5 in PHP/HTML | YourSite

How to integrate Summernote in Bootstrap 5 in PHP/HTML

Web Development • 937 views

In this post, you will learn how to integrate summernote in bootstrap 5 in php or normal html website too.

So, guys to accomplish this we will be using CDN Links of summernote.

Summernote CSS CDN Link:


<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

Summernote JS CDN Link:


<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

Run summernote:

Run the script below when document is ready!


<script>
    $(document).ready(function() {
        $("#your_summernote").summernote();
        $('.dropdown-toggle').dropdown();
    });
</script>

Simple example:

You can also test running example. Save below code as index.html / index.php and open it with your browser.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Integrate Summernote in PHP/HTML</title>

    <!-- Bootstrap 5 CDN Link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Summernote CSS - CDN Link -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <!-- //Summernote CSS - CDN Link -->

</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Integrate Summernote with Bootstrap 5 in PHP/HTML</h4>
                    </div>
                    <div class="card-body">

                        <form action="#">
                            <div class="mb-3">
                                <label>Big Description</label>
                                <textarea name="description" id="your_summernote" class="form-control" rows="4"></textarea>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js""></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Summernote JS - CDN Link -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#your_summernote").summernote();
            $('.dropdown-toggle').dropdown();
        });
    </script>
    <!-- //Summernote JS - CDN Link -->

</body>
</html>

Thanks for reading.