In this tutorial, we are going to share how to use TinyMCE editor in laravel application. TinyMCE is same as CKeditor different is layout and many features available in TinyMCE editor.
Laravel app support TinyMCE editor also provide free editor The WYSIWYG TinyMCE editor and It’s very easy to integrate tinymce in laravel.
Let’s follow the below steps for integrating TinyMCE in Laravel applicaiton. You can add Tinymce editor in laravel 5, laravel 6, laravel 7, laravel 8 or laravel 9.
Step 1: Install Laravel 9 App
First, we need to create one fresh laravel application help of the composer command. just run the following command in your terminal and create one laravel application.
composer create-project --prefer-dist laravel/laravel laravel-app
Step 2: Configure Database Credentials
Now, into the second step, we should configure the database settings in .env file just open your .env file and make the following changes. set youe database name, username, and password.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=ajax_crud DB_USERNAME=root DB_PASSWORD=
Step 3: Create Model & Table Migration
For generating model and migration you need to run the below command.
php artisan make:model Post -mAfter running this command you will get one model file Post.php and one migration file. Now open database\migrations\2021_09_26_072241_create_posts_table.php file and put the following code inside it;
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->longText('description');
$table->integer('auther');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}Add fillable properties in your post model just like below.
app\Models\Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title', 'description', 'auther'
];
}After that run the below command and generate database table using migration file.
php artisan migrate
Step 4: Create Route
In this step we will add two routes one for showing form and another is save the data in database.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::get('posts', [PostController::class, 'index']);
Route::post('posts', [PostController::class, 'store'])->name('posts.store');Step 5: Create Controller
Now create new controller as PostController just running below command.
php artisan make:controller PostControllerNext, open app\Http\Controllers\PostController.php file and put the below code on it.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
public function index()
{
return view('posts');
}
public function store(Request $request){
Post::create([
'title' => $request->title,
'title' => $request->description,
'auther' => Auth::id()
]);
return redirect()->back();
}
}Step 6: Create Blade File
Here we need to create a blade file and put the code on it for use TinyMCE Editor in laravel easily.
resources\views\posts.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How To Use TinyMCE Editor In Laravel ? - codingdriver.com</title>
<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" />
</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 ? - codingdriver.com</h6>
</div>
<div class="card-body">
<form class="image-upload" method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Title</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 text-center">
<button type="submit" class="btn btn-success btn-sm">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></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
});
</script>
</body>
</html>
Step 7: Run Development Server
Now the our requirements are added now run the dev server and check TinyMCE Editor showing in description section.
php artisan serve
http://localhost:8000/postsI hope you like this article.