How to integrate TinyMCE Editor in Laravel?

This simple article demonstrates of laravel tinymce editor example. if you have a question about laravel tinymce image upload then I will give a simple example with a solution. I would like to show you how to use tinymce editor in laravel. I would like to show you how to install tinymce in laravel. follow below step for TinyMCE editor in laravel.

you can use TinyMCE rich text box editor with laravel 6, laravel 7, laravel 8 and laravel 9 versions as well.

In this tutorial, we will create a posts table with a title and body column. we will create for with input for the title and TinyMCE rich textbox for the body, Then save it to the database.

Step 1: Install Laravel

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

.medrectangle-3-multi-157{border:none!important;display:block!important;float:none;line-height:0;margin-bottom:15px!important;margin-left:0!important;margin-right:0!important;margin-top:15px!important;max-width:100%!important;min-height:250px;min-width:250px;padding:0;text-align:center!important}

composer create-project laravel/laravel example-app

Step 2: Create Post Table and Model

in first step, we need create new migration for adding “posts” table:

php artisan make:migration create_posts_table

database/migrations/2022_02_17_133331_create_posts_table.php

.medrectangle-4-multi-155{border:none!important;display:block!important;float:none;line-height:0;margin-bottom:15px!important;margin-left:0!important;margin-right:0!important;margin-top:15px!important;max-width:100%!important;min-height:250px;min-width:300px;padding:0;text-align:center!important}

<?php

use IlluminateDatabaseMigrationsMigration;

use IlluminateDatabaseSchemaBlueprint;

use IlluminateSupportFacadesSchema;

return new class extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->text('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::dropIfExists('posts');

}

};

now let’s run migration command:

php artisan migrate

now, just create post model and add code as like bellow:

app/Models/Post.php

<?php

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;

use IlluminateDatabaseEloquentModel;

class Post extends Model

{

use HasFactory;

protected $fillable = [

'title',

'body',

];

}

Step 3: Create Route

In this is step we need to create some routes for listing posts and creating post.

routes/web.php

<?php

use IlluminateSupportFacadesRoute;

use AppHttpControllersPostController;

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

|

*/

Route::get('posts/create',[PostController::class,'create']);

Route::post('posts/store',[PostController::class,'store'])->name('posts.store');

Step 4: Create Controller

in this step, we need to create PostController and add following code on that file:

app/Http/Controllers/PostController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

use AppModelsPost;

class PostController extends Controller

{

/**

* Write code on Method

*

* @return response()

*/

public function create()

{

return view('postsCreate');

}

/**

* Write code on Method

*

* @return response()

*/

public function store(Request $request)

{

$this->validate($request, [

'title' => 'required',

'body' => 'required'

]);

$post = Post::create([

'title' => $request->title,

'body' => $request->body

]);

dd($post->toArray());

}

}

Step 5: Create Blade Files

here, we need to create blade files for index and create. so let’s create one by one files:

resources/views/postsCreate.blade.php

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Laravel TinyMCE Editor Image Upload Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="container mt-5">

<h1>Laravel TinyMCE Editor Image Upload Example - ItSolutionStuff.com</h1>

<form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">

@csrf

<div class="form-group">

<label>Title</label>

<input type="text" name="title" class="form-control" />

</div>

<div class="form-group">

<label>Description</label>

<textarea class="tinymce-editor" name="body"></textarea>

</div>

<div class="form-group text-center">

<button type="submit" class="btn btn-success btn-block">Publish</button>

</div>

</form>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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: 300,

menubar: false,

plugins: [

'advlist autolink lists link image charmap print preview anchor',

'searchreplace visualblocks code fullscreen',

'insertdatetime media table paste code help wordcount', 'image'

],

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>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/posts/create

Output:

How to integrate TinyMCE Editor in Laravel?

I hope it can help you….large-leaderboard-2-multi-158{border:none!important;display:block!important;float:none;line-height:0;margin-bottom:15px!important;margin-left:0!important;margin-right:0!important;margin-top:15px!important;max-width:100%!important;min-height:250px;min-width:300px;padding:0;text-align:center!important}

1 thought on “How to integrate TinyMCE Editor in Laravel?”

Leave a Comment