How to Use Summernote Editor in Laravel?

By Hardik Savani April 16, 2024 Category : Laravel

In this post, we will learn laravel summernote editor example. i would like to share with you how to use summernote editor in laravel. I’m going to show you about how to install summernote in laravel. you will learn summernote editor in laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11.

Whenever need to use rich textbox in our laravel application at that time you can use Summernote WYSIWYG editor, Summernote is wide range use and very popular. you can easily use Summernote without using any library here.

Summernote provide to use HTML Element for text content formatting. Summernote provide listing, image upload, link, font style, bold, italic etc. here i will give you simple example that will show you how to add and use Summernote in laravel app.

You can get bellow preview:

Blade File Code:

Let's see simple example blade file code using cdn js file library:

<html>
<head>
    <title>How to Use Summernote WYSIWYG Editor with Laravel? - ItSolutionStuff.com</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <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-8 offset-2 mt-5">
                <div class="card">
                    <div class="card-header bg-info">
                        <h6 class="text-white">How to Use Summernote WYSIWYG Editor with Laravel? - ItSolutionStuff.com</h6>
                    </div>
                    <div class="card-body">
                        <form method="post" action="" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="name" class="form-control"/>
                            </div>  
                            <div class="form-group">
                                <label><strong>Description :</strong></label>
                                <textarea class="summernote" name="description"></textarea>
                            </div>
                            <div class="form-group text-center">
                                <button type="submit" class="btn btn-success btn-sm">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
          $('.summernote').summernote();
        });
    </script>
</body>
</html>

Display Content:

after store content of rich textbox then you can display as bellow on listing page.

Read Also: How to Install and Use CKEditor in Laravel?
{!! $post->description !!}

Now you can check your own.

You can also use CKEditor as here: Laravel 7 CKEditor Example.

i hope it can help you...

Tags :
Previous

How to Install and Use CKEditor in Laravel?
Next

How to Use Bootstrap WYSIHTML5 Editor in Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares