Rumah Musafir Ilmu

Tutorial,Skripsi,Download Materi, dll

Tutorial WEB | Cara Upload Gambar di Editor TinyMCE

Salah satu fitur unggulan dalam editor WYSIWYG adalah Upload Gambar, karena kita bisa mengupload gambar yang langsung bisa ditampilkan didalam TextArea, asyiknya lagi tidak hanya satu gambar yang bisa di upload, namun boleh beberapa gambar sekaligus. Disamping itu, kita juga bisa memberikan ALT (Alternative Text) pada gambar untuk keperluan SEO dan letak gambar pun bisa diatur posisinya (Center, Left, Right).



Jadi, sekarang langsung saja kita mulai cara mengupload gambarnya:
  • Masuk dulu ke halaman Administrator CMS Lokomedia, lalu klik menu/modul Berita.
  • Selanjutnya, klik tombol Tambah Berita, maka akan tampil Form Tambah Berita.
  • Kemudian isi Judul Berita dan data lainnya, karena disini saya akan langsung ke WYSIWYG yang terletak pada Isi Berita. Silahkan isi teks pada paragraf pertama, lalu tekan tombol Enter di keyboard, maka kursor berada di paragraf kedua (1). Lihat pada gambar berikut:

  • Selanjutnya, klik ikon bergambar pohon di toolbar (2), maka akan tampil kotak dialog Insert/Edit Image, kemudian klik tombol Browse. Lihat gambar berikut:

  • Maka akan tampil kotak dialog KCFinder:/image. Kemudian klik tombol Upload, lalu cari file gambar yang mau di upload, misalnya logo-ajax.jpg, kalau berhasil di upload akan terlihat seperti pada gambar berikut:

  • Selanjutnya, klik 2x pada gambar logo-ajax.jpg, maka akan dibawa kembali ke kotak dialog Insert/Edit Image, silahkan isi Image Description (boleh tidak di isi), lalu klik tombol Insert. Lihat gambar berikut:

  • Maka gambar sudah tampil di TextArea Isi Berita, tepatnya pada baris kedua. Lihat gambar berikut:

Jika Anda ingin mengupload beberapa gambar lagi juga boleh, silahkan ulangi langkah 3 s/d 7, dalam contoh ini saya memasukkan dua gambar lagi. Kalau sudah selesai, silahkan klik tombol Simpan untuk menyimpan berita ke database. Adapun hasilnya dapat dilihat melalui halaman pengunjung, tepatnya detail beritanya, contohnya pada gambar berikut:

Catatan Penting:
  • File-file gambar yang di upload melalui KCFinder akan tersimpan di folder tinymcpuk/gambar.
  • Apabila nama file gambar yang di upload sudah ada, maka secara otomatis KCFinder akan memberikan nama lain untuk gambar tersebut, misalnya logo-ajax.jpg sudah ada, maka secara otomatis apabila Anda mengupload gambar dengan nama yang sama, maka nama filenya logo-ajax(1).jpg, artinya gambarnya sebelumnya masih ada dan tidak tertimpa dengan gambar yang sama nama filenya.
  • Gambar tidak akan tampil apabila dijalankan secara offline atau localhost, tapi jangan khawatir karena data dan gambarnya tetap tersimpan informasinya didalam database, sehingga kalau suatu saat di online-kan maka gambarnya akan tampil, atau lebih idealnya sih posting berita serta gambarnya dalam keadaan online, sehingga gambarnya langsung tampil,
Bagikan :
+
Previous
Next Post »
0 Komentar untuk "Tutorial WEB | Cara Upload Gambar di Editor TinyMCE"

TINGGALKAN KOMENTAR DISINI

PROVIDER HOSTING

PROVIDER HOSTING
Penyedia Layanan Hosting, Domain, Reseller Hosting Professional
 
Support By Pringsewu Host
Back To Top