I'll demonstrate how to use the WYSIHTML5 editor in a Laravel application today. Our Laravel application uses the WYSIHTML5 editor. The HTML5 technology and the progressive-enhancement methodology are the foundation of the open source rich text editor wysihtml5.
With the aid of wysihtml5 and Twitter Bootstrap, Bootstrap-wysihtml5 is a javascript plugin that makes it simple to create stunning, straightforward wysiwyg editors.

Let's look at the steps below. I will give you a complete example for the WYSIHTML5 editor in Laravel.

You must do as stated below.

Step 1 : Install Laravel App

You can install the fresh Laravel app in this stage. Open a terminal and type the command below.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Setup Database Configuration

Configure database configuration after the Laravel app has been installed successfully. We will edit the database name, username, and password in the ".env" file by opening it.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Step 3 : Create Table Migration and Model

The Laravel PHP artisan command will be used in this phase to build migration for the books table and book model, thus run the following command first:

php artisan make:model Book -m

You must then add the following code to your migration file in order to establish a books table.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBooksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('books', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->longText('description');
            $table->string('auther_name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('books');
    }
}

Currently, we need to run the migration command as follows:

php artisan migrate

Then, in order to construct a books table, you must add the following code to your Book model file.

app/Book.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    protected $fillable = ['name','description','auther_name'];
}

Step 3 : Create Route

We must now add a route to the Laravel application for the book controller. so add the following route by opening your "routes/web.php" file.

Route::get('books','BookController@index');
Route::post('books','BookController@store')->name(books.store);
Route::get('books/{id}','BookController@show')->name(books.show);

Step 4 : Create Controller

As of this phase, a new controller named BookController needs to be created. Run the command below to create a new controller.

php artisan make:controller BookController

Once the aforementioned command has been successfully executed. Let's copy the code below and paste it into the BookController.php file.

app/http/controller/BookController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Book;

class BookController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('book.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $input = $request->all();
        Book::create($input);
        return redirect()->back();
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show(Book $book)
    {
        return view('book.show',compact('book'));
    }
}

Step 5 : Create Blade File

final stage This phase requires us to make two blade files. Thus, the primary task is to establish a book folder in the view directory. A create file comes first, followed by a show file. Finally, you must create the following file and add the following code:

/resources/views/book/create.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Use WYSIHTML5 Editor In Laravel? - CodeSolutionStuff.com</title>
    <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>
</head>
<body class="wysihtml5-supported">
    <div class="container">
        <div class="row" style="margin-top: 50px;">
            <div class="col-md-12">
                <div id="showimages"></div>
            </div>
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 style="color: black;">How To Use WYSIHTML5 Editor In Laravel? - CodeSolutionStuff.com</h3>
                    </div>
                    <div class="panel-body">
                        <form class="image-upload" method="post" action="{{ route('books.store') }}" 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>Author Name</label>
                                <input type="text" name="auther_name" class="form-control"/>
                            </div>
                            <div class="form-group">
                                <label>Description</label>
                                <textarea name="description" class="textarea" style="width: 730px; height: 200px"></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 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>
    <script type="text/javascript">
        $(document).ready(function() {
          $('.textarea').wysihtml5();
        });
    </script>
</body>
</html>

/resources/views/book/show.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Use WYSIHTML5 Editor In Laravel? - CodeSolutionStuff.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="showimages"></div>
            </div>
            <div class="col-md-6 offset-3 mt-5">
                <div class="card">
                    <div class="card-header bg-info">
                        <h6 class="text-white">How To Use WYSIHTML5 Editor In Laravel? - CodeSolutionStuff.com</h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered">
                            <tr>
                                <th>No.</th>
                                <th>Name</th>
                                <th>Author Name</th>
                                <th>Description</th>
                            </tr>
                            <tr>
                                <td>{{ $book->id }}</td>
                                <td>{{ $book->name }}</td>
                                <td>{{ $book->auther_name }}</td>
                                <td>{!! $book->description !!}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Now that our example is ready to run, use the command below for a quick run:

php artisan serve

You can now access the following URL in your browser:

http://localhost:8000/books

Recommended Posts

View All

Laravel Eloquent WHERE Like Query Example Tutorial


Laravel provides a query builder that helps us to deal with such a situation in MySQL. In this tutorial, you'll learn how to use a select where like q...

Learn About API Testing Tool in Laravel 8 Tutorial


In this Laravel 8 tutorial, you will learn about the API Testing Tool. Laravel 8 composer package Web service testing API utility. How to use the Lara...

Generate Laravel PDF with Image Example


In this post, I will demonstrate how to create a Laravel PDF with an image. We occasionally need to generate a PDF with an image for reporting purpose...

Helper Function Example in Laravel 8


helper function example in laravel 8, laravel 8 global helper function, how to use global helper function in laravel 8, add helper function in laravel

Laravel 9 Elasticsearch Integration From Scratch With Example


In this post, we'll talk about how to incorporate Elasticsearch from scratch using a Laravel 9 example.