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 One to Many Polymorphic Relationship


laravel polymorphic relations example, laravel polymorphic one to many, laravel eloquent polymorphic relations, laravel one to many polymorphic

Laravel 9 Socialite Login with LinkedIn Tutorial Example


How to use the Laravel socialite, Livewire, and Jetstream libraries to create a LinkedIn login system from scratch in Laravel

Laravel 8 Install Bootstrap Example Tutorial


laravel ui, laravel ui bootstrap 4, bootstrap 4, laravel 8 install bootstrap 4, install bootstrap 4 in laravel 8, how to use bootstrap in laravel 8

Laravel Eloquent Query - Laravel Group By with Order By Desc


You&amp;#039;ve come to the right place if you&amp;#039;re looking for an example of a laravel eloquent group by order by desc.

Laravel 9 Scout Full Text Search with Algolia Tutorial


A full-text search feature in a web application is incredibly useful for users to navigate through content-rich web and mobile applications, as demons...