How To Use Summernote WYSIWYG Editor With Laravel?


In this post, we will learn laravel summernote editor with example. I would like to share how to use summernote editor in laravel. I’m going to share with you how to install summernote in laravel. you will be learn summernote editor in laravel.

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

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

How to Use Tiny MCE editor in Djang...
How to Use Tiny MCE editor in Django - Text Editor

You can get bellow easy preview:

How To Use Summernote WYSIWYG Editor With Laravel? - Step By Step
Create Blade File Code:

Use blade file code using CDN js file library:

<html>
<head>
    <title>How to Use Summernote WYSIWYG Editor with Laravel? - PHP Coding Stuff</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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-success">
                        <h6 class="text-white">How to Use Summernote WYSIWYG Editor with Laravel? - PHP Coding Stuff</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" placeholder="Name"/>
                            </div>  
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" name="email" class="form-control" placeholder="Email"/>
                            </div> 
                            <div class="form-group">
                                <label><strong>Description :</strong></label>
                                <textarea class="summernote" rows="10" 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 this code:

{!! $post->description !!}

Now you can check your own.


I hope it can help you...

Leave a Reply

Your privacy will not be published. Required fields are marked *

We'll share your Website Only Trusted.!!

close