Teman teman pasti pernah dengar yah istilah dari WYSIWYG (What You See Is What You Get) yang Bahasa IndonesiaNya adalah Apa yang anda lihat adalah apa yang anda dapatkan, seperti itulah kurang lebihnya, seperti text editor pada Mc. Word di tampilan ini pun bisa seperti itu, namun kalau hanya menampilkan seperti itu sudah biasanya, yang luar biasa bagaimana bisa sampai upload foto menggunakan tinymce, namun sudah banyak plugin yang sudah tersedia namun belom semuanya sempurna
kita perlu merombaknya sedikit agar terliohat sesuai dengan keinginan kita, kali ini saya akan ajarkan tentang Cara Menampilkan Icon Upload Gambar Pada Editor Tinymce (WYSIWYG), sebenarnya mudah mudah susah yah untuk menampilkannya cukup ketekunan dan kegigihan saja sih eheh ,, oke caranya seperti ini, oh yah untuk teman teman bisa download terlebih dahulu yah file tinymceNya di www.tinymce.com setelah sudah di download jadikan satu file dengan index.html yang kita buat .
Seperti ini :
Jika sudah coba tuliskan di file index.html yang telah kita buat tadi masukkan script seperti ini :
|
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 |
<head> <script src="js/tinymce.min.js"></script> <!-- <script src="upload.js"></script> --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> tinymce.init({ selector: "textarea", theme: "modern", paste_data_images: true, plugins: [ "advlist 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" ], toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", toolbar2: "print preview media | forecolor backcolor emoticons", image_advtab: true, file_picker_callback: function(callback, value, meta){ if (meta.filetype == 'image') { $('#upload').trigger('click'); $('#upload').on('change', function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function(e) { callback(e.target.result, { alt: '' } ); }; reader.readAsDataURL(file); } ); } } }); </head> |
|
1 2 3 4 5 |
<div class="form-group"> <label for="">DESCRIPTION</label> <textarea name="description" id="" cols="30" rows="10"></textarea> <input type="file" name="image" id="upload" class="hidden" onChange=""> </div> |
Save dan jalankan, dan pastikan jquerynya sudah masukkan yah ..
Jika berhasil maka tampilannya seperti ini :
Cukup mudah bukan? sekian tutorial tentang Cara Menampilkan Icon Upload Gambar Pada Editor Tinymce (WYSIWYG), sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA