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> @endsectionBerikut 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
cara memasukan tag kedalam whitelist bagaimana gan?
ReplyDeleteitemtype="https://schema.org
div itemscope=
otomatis dihapus oleh editor setelah disave
klik menu Format --> Code https://i.ibb.co/CbMck3h/fshd.jpg
Deletekalo lewat format kan ga ke parse gan..jadinya hanya text biasa
Deletesaya mau masukan html microdata atau JSON-LD untuk schema.og
sepertinya tidak bisa dilakukan itu gan
Deletebuat menambahkan element microdata bisa cek url ini bro https://github.com/ezyang/htmlpurifier/issues/277
Deleteterakhir 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?
ReplyDeleteharus 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