Integrasi Editor TinyMCE di Framework Laravel

Saya mengikuti tutorial Laravel 8 yang ditulis di https://ilmucoding.com/crud-laravel-8/ (update 25/06/2022 : dead link). 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/6/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

  1. cara memasukan tag kedalam whitelist bagaimana gan?


    itemtype="https://schema.org
    div itemscope=

    otomatis dihapus oleh editor setelah disave

    ReplyDelete
    Replies
    1. klik menu Format --> Code https://i.ibb.co/CbMck3h/fshd.jpg

      Delete
    2. kalo lewat format kan ga ke parse gan..jadinya hanya text biasa

      saya mau masukan html microdata atau JSON-LD untuk schema.og

      Delete
    3. sepertinya tidak bisa dilakukan itu gan

      Delete
    4. buat menambahkan element microdata bisa cek url ini bro https://github.com/ezyang/htmlpurifier/issues/277

      Delete
  2. terakhir gan...kalau city is not defined? sepertinya udah jelas variable city belum di defined...saya ikutin step di atas hanya ane buatnya di kategori yang namanya city...editor tinymce udah muncul dan ane sudah buat table "deskripsi" buat nyimpan text...dan di properties.blade ( yg munculin kategori ) ane add {!! $city->description !!}..ada error city is not defined....cara buat variablenya gmn gan?

    ReplyDelete
    Replies
    1. harus bikin controllernya dulu gan, misal kayak di sini codenya https://github.com/ardhiesta/myblog/blob/master/app/Http/Controllers/PostController.php. Saya bikin $post di controller itu

      Delete

Post a Comment

Popular posts from this blog

Contoh Inheritance (Pewarisan) di Java

Contoh Penerapan Interface di Pemrograman Java

Review Singkat Pilihan Transportasi Umum Rute Solo - Wonosobo