Senin, 10 April 2017

Cara Menambahkan Plugin Upload Gambar pada TinyMCE

Berikut langkah-langkah untuk menambahkan plugin upload gambar dalam texare dengan TyniMCE 4:
1. Download TinyMCE
Download plugin di https://www.tinymce.com/, usahakan pakai versi terbaru yakni v4. Jika sudah masukan folder tinymce di dalam framework laravel di folder public/js (terserah).

2. Instal plugin upload image
TinyMCE sendiri tidak menyediakan fitur upload image untuk versi yang free, jadi kita harus memakai plugin dari luar. Silahkan download pluginnya di http://justboil.me/. Kalau sudah download, ekstrak, copy foldernya, pindahkan ke dalam tinymce/plugins/, setelah dipaste rename nama folder menjadi jbimages.
justboil.me-master à ubah menjadi jbimages
Kemudian kita integrasikan ke dalam framework laravel, di dalam artikel-input.php, paste kode/perintah JS ini (didalam tag head).
<head>
<html>
<title>Tutorial Menambah TinyMCE kedalam PHP</title>
<head>

<script type="text/javascript" src="tinymce4/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">

tinymce.init({
  selector: "textarea",
 
  // ===========================================
  // INCLUDE THE PLUGIN
  // ===========================================
           
  plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste jbimages"
  ],
           
  // ===========================================
  // PUT PLUGIN'S BUTTON on the toolbar
  // ===========================================
           
  toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages",
           
  // ===========================================
  // SET RELATIVE_URLS to FALSE (This is required for images to display properly)
  // ===========================================
           
  relative_urls: false
           
});

</script>

</head>
<body>
<table>
<tr>
<td>Judul</td>
<td>:</td>
<td><input type="text" name="judul"></td>
</tr>
<tr>
<td>subjudul</td>
<td>:</td>
<td><input type="text" name="subjudul"></td>
</tr>
<tr>
<td>Artikel</td>
<td>:</td>
<td><textarea name="artikel"></textarea></td>
</tr>
</table>
</body>
</html>
Karena yang itu gambar, jadi teman-teman silahkan copy di sini http://justboil.me/ (TinyMCE 4.x Example).
Kalau sudah teman-teman tinggal buat saja form textarea.
3. Config
Tinggal kita set up alamat folder untuk menyimpan file gambar, pada tinymce/plugins/jbimages/config.php.
$config['img_path'] = '/sma/images'; // --> folder web di lokal / folder gambar hasil upload
            $config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path']; // Physical path. [Usually works fine like this]


Alamat foldernya di public ya...

Tidak ada komentar:

Posting Komentar

Latihan Ujian

Ujian Sekolah (US) adalah   kegiatan   pengukuran   pencapaian   kompetensi peserta   didik   yang   dilakukan   oleh   satuan   pendidikan...