Php How to integrate TinyMCE in laravel with example

Php How to integrate TinyMCE in laravel with example

TinyMCE is a most popular text editor. There are lots of features of TinyMCE which can be used in our web application. So we are here to see the demo of TinyMCE and will know how to integrate TinyMCE in laravel.

TinyMCE is a free tool to use but for some advance features, you will need to pay. And it’s really an amazing text editor tool. 

So let’s move farword to the integration process of TinyMCE. Here i will give an example in which i will use TinyMCE text editor.

I am assuming that you have already laravel installed in your system. I will cover only TinyMCE integration process with an example. 

Step 1: Create Routes

Here we will create three routes for whole demo of TinyMCE text editor in laravel.

  1. Route to create form for entering content with TinyMCE text editor
  2. Route to save posted content data from form
  3. Route to view saved content
//get article form route
Route::get('/get-article-form','ArticleController@getArticleForm')->name('get.article.form');
//store article route
Route::post('/save-article','ArticleController@storeArticle')->name('store.article');
//display article route
Route::get('/get/article/{id}','ArticleController@showArticle')->name('show.article');

Now let’s go to the second step, in which we will create controller.

Step 2: Create Controller

In this step, we will create a controller and the name of this controller would be ArticleController as mentioned in the routes and there would be three methods in it to handle the request comng from routes.

So let’s create a file ArticleController.php under app/Http/controllers directory. and create three methods as mentioned above and put the ffollowing code into this controller file.

app/Http/controllers/ArticleController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use app\Article;
class ArticleController extends Controller
{
   
    public function getArticleForm()
    {
      return view('tinymce-article-form');
    }
    public function storeArticle(Request $request)
    {
      $input_data = $request->all();
      $article = new Article();     
      $article->title = $input_data['title'];
      $article->description = $input_data['description'];
      $article->author = $input_data['author];
      $article->save();
      return redirect()->route('get.article.form)->withSuccess(['Data saved successfully.']);
    }
   
    public function showArticle(Request $request, $id)
    {
      $article = Article::where('id',$id)->first();
      return view('display-article', compact('article'));
    }
}

Step 3: Create Table and Model

Let’s create a table and give the name articles with some fields like id, title, description, author_name, create_at and updated_at.

After creating articles table we will need to create a model Article in respect of this table.

We can generate Article model using the followng artisan command.

php artisan make:model Article

Step 4: Create View

Required views files name is written in the controller above, So let’s create these two view file for article form and view article on the resources/view directory path. And copy the following code.

resources/view/tinymce-form.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Php How to integrate TinyMCE in laravel with example</h1><br> 
                <form method="post" class="form form-horizontal">               
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="title" 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="author" class="form-control"/>
                    </div>   
                    <div class="form-group">
                        <input type="submit" value="Submit" class="btn btn-primary"/>
                    </div> 
                </form>             
            </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: 500,
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>

In the above file you will need to replace no-key with the TinyMCE api key. You can get the api key from TinyMCE website after signing up. Link of TinyMCE text editor website is given at theend of this article.

After creating form view, now let’s create get article view file. And the name of this file would be display-article.blade.php. 

resources/view/display-article.blade.php

<!DOCTYPE html>
 <html lang="en">
  <head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
  </head> 
  <body> 
    <div class="container"> 
      <div class="row"> 
        <div class="col-md-12"> 
          <h1 class="text-center">Php How to integrate TinyMCE in laravel with example</h1><br> 
          </div>
      </div>
      <div class="col-md-12">
        <p>Title: <?php echo $article->title; ?></p>
      </div>
      <div class="col-md-12">
        <p>Description: </p>
        <?php echo $article->description; ?>
      </div>
      <div class="col-md-12">
        <p>Author Name: <?php echo $article->author; ?></p>
      </div>
    </div>
  </body> 
</html>

Now, we all have completed this feature and learned to integrate tinyMCE text editor in laravel. I have used all the feature of free version of tinyMCE text editor, you can purchase premium feature and integrate into your laravel application. Integration process would be same. You will have to change only api key.

For more iformation about tinyMCE, you can visit TinyMCE editor’s official website or cliecking on this link TinyMCE text editor