How to Use Bootstrap WYSIHTML5 Editor in Laravel?

By Hardik Savani April 16, 2024 Category : Laravel

In this tutorial, you will learn laravel bootstrap wysihtml5 editor example. you will learn how to install bootstrap wysihtml5 editor in laravel. i explained simply step by step bootstrap wysihtml5 editor laravel example. you can see laravel wysihtml editor example. Let's get started with use bootstrap wysihtml 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 wysihtml5 html editor. you can easily use bootstrap wysihtml5 without using any library here.

Bootstrap wysihtml5 provide to use HTML Element for text content formatting. wysihtml5 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 wysihtml5 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 WYSIHTML5 Editor with Laravel? - ItSolutionStuff.com</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="https://jhollingworth.github.io/bootstrap-wysihtml5//lib/css/bootstrap.min.css"></link>
    <link rel="stylesheet" type="text/css" href="https://jhollingworth.github.io/bootstrap-wysihtml5//lib/css/prettify.css"></link>
    <link rel="stylesheet" type="text/css" href="https://jhollingworth.github.io/bootstrap-wysihtml5//src/bootstrap-wysihtml5.css"></link>
  
    <script src="https://jhollingworth.github.io/bootstrap-wysihtml5//lib/js/wysihtml5-0.3.0.js"></script>
    <script src="https://jhollingworth.github.io/bootstrap-wysihtml5//lib/js/jquery-1.7.2.min.js"></script>
    <script src="https://jhollingworth.github.io/bootstrap-wysihtml5//lib/js/prettify.js"></script>
    <script src="https://jhollingworth.github.io/bootstrap-wysihtml5//lib/js/bootstrap.min.js"></script>
    <script src="https://jhollingworth.github.io/bootstrap-wysihtml5//src/bootstrap-wysihtml5.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 WYSIHTML5 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="wysihtml5 form-control" 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() {
          $('.wysihtml5').wysihtml5();
        });
    </script>
</body>
</html>

Display Content:

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

Read Also: How to Use Summernote Editor in Laravel?
{!! $post->description !!}

Now you can check your own.

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

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

i hope it can help you...

Tags :
Previous

How to Use Summernote Editor in Laravel?
Next

PHP Multidimensional Array Search By Value Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares