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
