Langsung ke konten utama

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...
Label:

Postingan populer dari blog ini

Do'a Halal Bihalal

Bismillahirrahmanirrohim. Alhamdulillahi Robbil ‘alamin Allahumma sholli ;ala sayyidina muhammadin wa’ala alihi wa shohbihi ajma’in Segala puji bagi-Mu ya Allah yang telah melimpahkan kepada kami kesehatan rohani dan jasmani sehingga kami dapat mensyukuri nikmat-Mu. Ya Allah Ya Tuhan kami, telah satu bulan penuh kami menjalankan ibadah puasa, lapar dan haus telah kami tahan, nafsu insaniyah dan nafsu amarah telah kami redam demi mendapatkan rahmat dan ampunan-Mu, untuk mendapatkan ridha dan barokah-Mu. Maka pada hari ini kami berkumpul di tempat ini untuk saling melepaskan salah dan dosa diantara kami , untuk menghilangkan rasa iri, karatan-karatan halus yang bersarang dalam hati sanubari diantara kami, sehingga bersihlah hati kami dalam melaksanakan ibadah kepada-Mu dan dalam menjalankan aktifitas sehari-hari kami. Ya Allah Tuhan yang Maha Pengampun Ampunilah segala dosa kami, dosa kedua orang tua kami, dosa sahabat-sahabat kami, dosa pemimpin-peminpin...
Baca selengkapnya

GAMBARAN UMUM SAMBUNGAN INTERNET

Secara    umum   ada    dua    (2)    cara    untuk    dapat    tersambung    ke    Internet,    yaitu   melalui sambungan    perorangan    dan   melalui    sambungan    perkantoran.    Sambungan    perorangan (home user) biasanya digunakan di rumah atau kantor menggunakan satu buah komputer saja.    Sambungan    perkantoran/kampus    (corporate    user)    biasanya    berupa    sekumpulan komputer    yang    terkait    dalam    sebuah    jaringan    lokal    (biasa    di    sebut   Local    Area Network/LAN) yang tersambung pada kecepatan tinggi ke Internet.Dari sisi peralatan, konfigurasi sambungan tersebut adalah sebagai berikut. ...
Baca selengkapnya

DOKUMEN 1,2 DAN 3 KTSP PADA KURIKULUM 2013

Di Dalam Permendikbud No. 61 Tahun 2014 dijelaskan bahwa KTSP adalah kurikulum operasional yang disusun oleh dan dilaksanakan di masing-masing satuan pendidikan. Pengembangan KTSP jenjang pendidikan dasar dan menengah mengacu pada Standar Nasional Pendidikan, Kerangka Dasar dan Struktur Kurikulum, dan pedoman implementasi Kurikulum. KTSP dikembangkan oleh satuan pendidikan dengan melibatkan komite sekolah/madrasah, dan kemudian disahkan oleh kepala dinas pendidikan atau kantor kementerian agama provinsi dan kabupaten/kota sesuai dengan kewenangannya. Dokumen 1,2, dan 3 KTSP berisi, antara lain : Dokumen 1 yang disebut dengan Buku I KTSP berisi sekurang-kurangnya visi, misi, tujuan, muatan, pengaturan beban belajar, dan kalender pendidikan. Penyusunan Buku I KTSP menjadi tanggung jawab kepala sekolah/madrasah. Dokumen 2 yang disebut dengan Buku II KTSP berisi silabus. Buku II KTSP sudah disusun oleh Pemerintah, dan dokumen 3 yang disebut dengan...
Baca selengkapnya