Hello Devs,
In this tutorial, we are going to learn how to use WYSIHTML5 editor in laravel application.
Follow this step by step guide given below:
Step 1 :
Install Laravel App
composer create-project --prefer-dist laravel/laravel blogStep 2 :
Setup Database Configuration open ".env" file and change the database
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
php artisan make:model Book -m/database/migrations/2020_05_27_100722_create_books_table.php
<?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');
}
}Run this command:
php artisan migrate
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 app/web.php
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
php artisan make:controller BookControllerapp/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 /resources/views/book/create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How To Use WYSIHTML5 Editor In Laravel? - Rathorji.in</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? - Rathorji.in</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? - Rathorji.in</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? - Rathorji.in</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>Run this command:
php artisan serveOpen this URL:
http://localhost:8000/booksI hope this example helps you.