How To Install And Use TinyMCE – WYSIWYG HTML Editor In Laravel

In past, we have published an article on how to use CKEditor in Laravel. Many of our readers asked us to write the post on how to use TinyMCE editor in Laravel. TinyMCE is one of the popular WYSIWYG HTML editors. So in this article, we study how to use TinyMCE in your Laravel application.

While working on the web, sometimes we need to store long text, a description in our database. It can be about biography, product description, page content, etc. All these summary requires different HTML tags need to use. HTML textarea tag is not user-friendly when it comes to writing content including HTML elements. This is where we should use web text editors.

TinyMCE and CKEditor are two of our favorite editors. It is up to you to choose either one. Both WYSIWYG(what you see is what you get) editors are light-weight and work perfectly for web applications.

TinyMCE editor is free to use with the limited tools. If one wish to use their premium plugins then please checkout their pricing page.

Basic Example Of TinyMCE

Installation of TinyMCE is a straight-forward. There is nothing complex in it. We just need to include their JavaScript file and we are done with the installation process.

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

The basic example of using TinyMCE editor is as follows.

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
<div class="panel-body">
  <textarea>Write content here!</textarea>
</div>

This is the basic example. To use the TinyMCE, we just need to include their JS file and call tinymce.init and pass selector to it.

When it comes to Laravel, we should do it in a little bit different way.

Install And Use TinyMCE In Laravel

Let’s say we have to pass content from the controller to the views. Our controller method will be something like below.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TinymceController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $content = "<h1>Lorem Ipsum</h1> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

        return view('tinymce', compact('content'));
    }
}

Here we are passing dummy Lorem Ipsum content to our view file tinymce.blade.php.

In the view file, we will write the code as follows.

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Description</div>
                <div class="panel-body">
                    <textarea class="description">{{$content}}</textarea>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea.description' });</script>
@endsection

In our case, we have created a file layouts/app.blade.php and include it here.

app.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('public/css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        @yield('content')
    </div>

    @yield('footer')
</body>
</html>

Of course the line @yield('content') get replaced by our content wrap in @section('content') ... @endsection. Same with for @yield('footer'), content in @section('footer') ... @endsection will replaced.

Our final WYSIWYG editor will look like as below screenshot.

TinyMCE

If you liked this article, then please subscribe to our Youtube Channel for video tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *