Hello Devs,
In this tutorial, we are going to learn how to add TinyMCE editor in laravel app.
Follow this step by step guide given below:
Step 1 :
Install Laravel App
composer create-project --prefer-dist laravel/laravel blog
Step 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 4 :
Create Route app/Book.php
Route::get('books','BookController@index');
Route::post('books','BookController@store')->name(books.store);
Route::get('books/{id}','BookController@show')->name(books.show);
Step 5 :
Create Controller
php artisan make:controller BookController
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 6 :
Create Blade File /resources/views/book/create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How To Use TinyMCE 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 TinyMCE Editor In Laravel ? - Rathorji.in</h6>
</div>
<div class="card-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>Description</label>
<textarea name="description" rows="5" cols="40" class="form-control tinymce-editor"></textarea>
</div>
<div class="form-group">
<label>Author Name</label>
<input type="text" name="auther_name" class="form-control"/>
</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://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
tinymce.init({
selector: 'textarea.tinymce-editor',
height: 100,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_css: '//www.tiny.cloud/css/codepen.min.css'
});
</script>
</body>
</html>
/resources/views/book/show.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How To Use TinyMCE 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 TinyMCE 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 serve
Open this URL:
http://localhost:8000/books
I hope this example helps you.