Integrasi Editor TinyMCE di Framework Laravel

Saya mengikuti tutorial Laravel 8 yang ditulis di https://ilmucoding.com/crud-laravel-8/. Melalui tutorial tersebut saya membuat web app sederhana yang saya sebut myblog, melalui web yang saya buat saya dapat melakukan CRUD : menulis postingan, mengedit postingan, menampilkan postingan dan menghapusnya.

Saya menambahkan fitur WYSIWYG editor pada halaman Create New Post. Terdapat beberapa library yang bisa kita gunakan untuk menambahkan fitur tersebut, diantaranya adalah TinyMCE dan CKEditor. Pada tutorial kali ini akan saya bagikan cara menambahkan editor TinyMCE.

Tambahkan baris berikut sebelum </head>

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<script>
	tinymce.init({
		selector: '#mytextarea'
	});
</script>
Saya tambahkan code tersebut di dalam file template_tinymce.blade.php yang ada di dalam folder resources/views. Berikut ini adalah source code lengkapnya
<!--file : resources/views/template_tinymce.blade.php-->
<!DOCTYPE html>
<html>
<head>
    <title>Tutorial CRUD Laravel 8 untuk Pemula - Ilmucoding.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

	<script>
		tinymce.init({
			selector: '#mytextarea'
		});
	</script>
</head>
<body>
 
<div class="container">
    @yield('content')
</div>
 
</body>
</html>

no-api-key pada scipt di atas dapat diganti dengan API key hasil registrasi di web TinyMCE untuk menghilangkan error message This domain is not registered with Tiny Cloud ... dst.

Selanjutnya edit file resources/views/posts/create.blade.php. Ganti @extends menjadi
@extends('template_tinymce')

dan tambahkan id="mytextarea" ke dalam tag textarea, berikut ini adalah source code lengkapnya

<!--file : resources/views/posts/create.blade.php-->
@extends('template_tinymce')
 
@section('content')
<div class="row mt-5 mb-5">
    <div class="col-lg-12 margin-tb">
        <div class="float-left">
            <h2>Create New Post</h2>
        </div>
        <div class="float-right">
            <a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
        </div>
    </div>
</div>
 
@if ($errors->any())
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
 
<form action="{{ route('posts.store') }}" method="POST">
    @csrf
 
     <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Title:</strong>
                <input type="text" name="title" class="form-control" placeholder="Title">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Content:</strong>
                <textarea id="mytextarea" class="form-control" style="height:150px" name="content" placeholder="Content"></textarea>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
 
</form>
@endsection
Berikut ini adalah tampilan halaman Create New Post dengan editor TinyMCE

Kita dapat melakukan formatting pada teks yang ditulis, misalnya membuat huruf menjadi miring dan tebal, atau membuat teks menjadi heading.

Selanjutnya adalah mengedit source code untuk menampilkan postingan. Edit file  resources/views/posts/show.blade.php, ubah baris
{{ $post->content }}
menjadi
{!! $post->content !!}

Berikut ini adalah source code lengkap file resources/views/posts/show.blade.php

<!--file : resources/views/posts/show.blade.php-->
@extends('template')
 
@section('content')
    <div class="row mt-5 mb-5">
        <div class="col-lg-12 margin-tb">
            <div class="float-left">
                <h2> Show Post</h2>
            </div>
            <div class="float-right">
                <a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
            </div>
        </div>
    </div>
 
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Title:</strong>
                {{ $post->title }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Content:</strong>
                {!! $post->content !!}
            </div>
        </div>
    </div>
@endsection

Berikut ini adalah tampilan halaman Show Post yang sekarang dapat merender tag html hasil menulis di editor TinyMCE.

Edit juga file resources/views/posts/edit.blade.php agar halaman edit post juga dilengkapi dengan editor TinyMCE, sama seperti create.blade.php dengan mengubah @extends dan menambahkan id pada textarea

<!--file : resources/views/posts/edit.blade.php-->
@extends('template_tinymce')
 
@section('content')
    <div class="row mt-5 mb-5">
        <div class="col-lg-12 margin-tb">
            <div class="float-left">
                <h2>Edit Post</h2>
            </div>
            <div class="float-right">
                <a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
            </div>
        </div>
    </div>
 
    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
 
    <form action="{{ route('posts.update',$post->id) }}" method="POST">
        @csrf
        @method('PUT')
 
         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Title:</strong>
                    <input type="text" name="title" value="{{ $post->title }}" class="form-control" placeholder="Title">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Content:</strong>
                    <textarea id="mytextarea" class="form-control" style="height:150px" name="content" placeholder="Content">{{ $post->content }}</textarea>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
              <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </div>
 
    </form>
@endsection

Source code lengkap dapat diunduh dari repo Github https://github.com/ardhiesta/myblog/releases/tag/v0.1

Comments