Cara Membuat Text Editor WYSIHTML5 pada PHP dengan TinyMCE – Setelah sebelumnya saya memposting tentang memasang Text Editor menggunakan CKEditor pada aplikasi kita, sekarang saya akan memposting tentang Teks Editor yang lainnya yaitu TinyMCE. Plugin ini lebih mirip dengan Word menurut saya, sobat bisa bandingkan dengan CKEditor dengan mendownload projectnya pada akhir postingan.
Baca Juga :
Memasang Text Editor CKEditor WYSIHTML5 pada PHP dengan Mudah
Memasang Text Editor Summernote WYSIHTML5 dengan Mudah
Membuat TinyMCE Default
Penggunaan plugin TinyMCE juga sangat mudah dan fiturnya juga lengkap. Sobat bisa menggunakan bawaannya atau bisa juge mengcustomnya. Caranya adalah sebagai berikut
1. Download plugin tinymce pada situs resminya disini atau sobat bisa mendownloadnya di akhir postingan ini.
2. Setelah itu masukkan librari tinymce pada tag <body> paling bawah di file index.php seperti contoh berikut
|
1 |
<script src="tinymce/tinymce.min.js"></script> |
3. Kemudian membuat file textarea seperti contoh dibawah
|
1 |
<textarea name="default" id="default"></textarea> |
4. Tambahkan tag <script> dibawah file javascript tinymce.js dengan kode dibawah
|
1 2 3 |
<script> tinymce.init({ selector:'#default', }); </script> |
5. Jika sobat jalankan project sobat maka tampilanya akan menghasilkan seperti gambar dibawah
Membuat Custom pada TinyMCE
Menu pada plugin TinyMCE juga sangat banyak, dan sobat bisa mengkostumnya juga ingin menampilkan yang mana saja seperti pada CKEditor. Caranya adalah sebagai berikut :
1. Buat textareanya seperti contoh berikut
|
1 |
<textarea name="custom" id="custom"></textarea> |
2. Kemudian tambahkan tag <script> dengan kode dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> tinymce.init({ selector: '#custom', height: 400, forced_root_block : "", force_br_newlines : true, force_p_newlines : false, plugins: [ 'autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc' ], toolbar1: 'undo redo | insert | styleselect table | bold italic | hr alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media ', toolbar2: 'print preview | forecolor backcolor emoticons | fontselect | fontsizeselect | codesample code fullscreen', templates: [ { title: 'Test template 1', content: '' }, { title: 'Test template 2', content: '' } ], content_css: [ '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', '//www.tinymce.com/css/codepen.min.css' ], }); </script> |
3. Jika sobat jalankan project sobat maka pada textarea akan menjadi seperti dibawah
Namun Jika upload images akan menjadi seperti dibawah dan kita bisa membuat customnya untuk upload images pada TinyMCE dari Local Storage
Membuat Upload Foto pada TinyMCE
Jika sobat menggunakan default, TinyMCE tidak menyediakan upload Images/Foto oleh karena itu kita harus membuatnya sendiri. Berikut adalah cara membuat upload foto/gambar pada TinyMCE :
1. Buat textarea seperti berikut
|
1 |
<textarea name="custom2" id="custom2"></textarea> |
2. Pada tag <script> tambahkan kode berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
tinymce.init({ selector: '#custom2', height: 400, file_browser_callback_types: 'file image media', file_picker_types: 'file image media', forced_root_block : "", force_br_newlines : true, force_p_newlines : false, plugins: [ 'autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc' ], toolbar1: 'undo redo | insert | styleselect table | bold italic | hr alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media ', toolbar2: 'print preview | forecolor backcolor emoticons | fontselect | fontsizeselect | codesample code fullscreen', templates: [ { title: 'Test template 1', content: '' }, { title: 'Test template 2', content: '' } ], content_css: [ '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', '//www.tinymce.com/css/codepen.min.css' ], images_upload_url: 'uploadtiny.php', images_upload_handler: function (blobInfo, success, failure) { var xhr, formData; xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open('POST', 'uploadtiny.php'); xhr.onload = function() { var json; if (xhr.status != 200) { failure('HTTP Error: ' + xhr.status); return; } json = JSON.parse(xhr.responseText); if (!json || typeof json.location != 'string') { failure('Invalid JSON: ' + xhr.responseText); return; } success(json.location); }; formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); xhr.send(formData); }, }); |
Penggunaanya mirip seperti custom pertama namun sobat perlu menambahkan baris
|
1 2 |
file_browser_callback_types: 'file image media', file_picker_types: 'file image media', |
Untuk menambahkan action upload maka sobat perlu juga menambahkan kode seperti dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
images_upload_url: 'uploadtiny.php', images_upload_handler: function (blobInfo, success, failure) { var xhr, formData; xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open('POST', 'uploadtiny.php'); xhr.onload = function() { var json; if (xhr.status != 200) { failure('HTTP Error: ' + xhr.status); return; } json = JSON.parse(xhr.responseText); if (!json || typeof json.location != 'string') { failure('Invalid JSON: ' + xhr.responseText); return; } success(json.location); }; formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); xhr.send(formData); }, |
3. Seperti yang tertulis uploadtiny.php yang berarti kita perlu membuat file uploadtiny.php kemudian isikan dengan kode dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php $tempdir = "upload/"; if (!file_exists($tempdir)) mkdir($tempdir); reset($_FILES); $temp = current($_FILES); if(is_uploaded_file($temp['tmp_name'])){ if(isset($_SERVER['HTTP_ORIGIN'])){ if(in_array($_SERVER['HTTP_ORIGIN'])){ header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']); }else{ header("HTTP/1.1 403 Origin Denied"); return; } } if(preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])){ header("HTTP/1.1 400 Invalid file name."); return; } if(!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png", "mp4"))){ header("HTTP/1.1 400 Invalid extension."); return; } $acak = rand(1111111, 9999999).".png"; $filetowrite = $tempdir . $acak; move_uploaded_file($temp['tmp_name'], $filetowrite); echo json_encode(array('location' => $filetowrite)); } else { header("HTTP/1.1 500 Server Error"); } ?> |
4. Jika sobat jalankan maka pada upload images akan muncul tab upload images seperti gambar dibawah
Jika sobat klik Browse dan pilih foto maka secara otomatis akan membuat folder upload dan akan terisi gambar yang tadi sobat upload.
Sekian postingan saya tentang Cara Membuat Text Editor WYSIHTML5 pada PHP dengan TinyMCE. Jika ada pertanyaan silahkan sobat tinggalkan pada kolom komentar dibawah. Jika ada kesalahan saya mohon maaf.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :