author Ahmad Muhardian

Menggunakan TinyMCE pada Proyek Web


Cara Menggunakan TinyMCE

Pada sebuah proyek yang saya kerjakan, terdapat fitur yang harus menggunakan teks editor untuk menginputkan nilainya. Karena deadline proyek ini begitu cepat. Saya tidak punya banyak waktu untuk membuat teks editor berbasis HTML.

Karena itu, cara tercepat ialah menggunakan teks editor yang sudah ada, yaitu TinyMCE. Nah, pada kesempatan ini, saya akan berbagi cara menerapkan TinyMCE dalam Web.

1. Download TinyMCE

Silahkan men-download TinyMCE pada website resminya: tinymce.com. Setelah itu, ekstrak ke dalam direktori assets.

Lokasi TinyMCE pada proyek web

2. Kode HTML (Form)

Berikut ini kode form yang sudah saya persiapkan. Pada intinya, TinyMCE hanya akan berpengaruh pada elemen <textarea>.

<div class="panel panel-default">
<form action="<?php echo site_url(‘admin/produk/tambah_produk’) ?>" method="post" enctype="multipart/form-data">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="nama-barang">Nama</label>
                    <input type="text" class="form-control" name="nama_barang" placeholder="Nama Produk…" />
                </div>
                
                <div class="form-group">
                    <label for="nama-barang">Harga</label>
                    <input type="text" class="form-control" name="harga_barang" id="harga-barang" placeholder="Harga..." />
                </div>

                <div class="form-group">
                    <label for="nama-barang">Jenis</label><br>
                    <span class="check">
                        <label><input type="radio" name="jenis" value="barang"> Barang</label>&nbsp;
                        <label><input type="radio" name="jenis" value="jasa"> Jasa</label>&nbsp;
                        <label><input type="radio" name="jenis" value="paket"> Paket</label>&nbsp;
                        <label><input type="radio" name="jenis" value="promo"> Promo</label>
                    </span>
                </div>
                
                

            </div>
            <!-- Kolom ke-2/deskripsi dan keterangan -->
            <div class="col-md-8">
                <div class="form-group">
                    <label for="nama-barang">Keterangan/Spesifikasi</label>
                    <textarea name="keterangan" class="form-control" rows="15" placeholder="Keterangan atau spesifikasi…"></textarea>
                </div>
                <div class="form-group">
                    <label for="nama-barang">Foto/Gambar</label>
                    <input type="file" name="gambar_barang" placeholder="Foto…" />
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-success"><i class="fa fa-send">* Simpan</button>
    </div><!-- panel body -->
</form>
</div>

3. Sisipkan Kode Javascript TinyMCE

Penyisipan file Javascript TinyMCE harus diletakkan sebelum kode persiapan, atau dengan kata lain sisipkan dulu TinyMCE, baru setelah itu dipersiapkan. Penyisipan TinyMCE bisa di dalam tag <head> maupun diakhir (sebelum) penutup body (</body>).

<script src="<?php echo base_url()?>assets/tinymce/js/tinymce/tinymce.min.js"></script>

Abaikan kode PHP-nya, karena saya menggunakan CodeIgniter di proyek ini. Bila anda tidak menggunakan CodeIgniter, silahkan sesuikan dengan lokasi (path) TinyMCE-nya.

4. Kode persiapan

Pada kode persiapan, kita bisa mengatur bagaiaman TinyMCE ditampilkan. Serta mau ditampilkan di elemen yang mana.

<script type='text/javascript'> 
tinymce.init({ selector:'textarea', menubar:'', theme: 'modern'});
</script>

Pada kode persiapan di atas, saya memilih semua elemen <textarea>, karena hanya ada satu elemen <textarea> dalam form. Selain itu, saya menghilangkan menubar dan mengatur temanya menggunakana modern. Informasi lebih lengkap dengan kode persiapan, mungkin bisa dibaca di dokumentasi TinyMCE.

5. Demo

Baca Juga ini

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Validasi data itu penting! Mengapa? Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error. Dampak terburuknya: Website kita bisa diambil alih atau di-hack. Ngeri kan. Karena itu.. Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat. Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server. Dulu.. validasi data di sisi client dilakukan dengan Javascript.

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal

Ketika saya menggunakan modal untuk menampilkan peta (Google Maps), petanya tidak mau tampil. Entah mengapa? setelah ukuran layarnya di-resize, petanya bisa tampil. Mungkin karena div di dalam modal bersifat dinamis atau responsif. Peta kosong, hanya ada warna abu-abu. Solusi dari masalah ini saya temukan di Stackoverflow. MarcoK memberikan penjelasan jawaban atas masalah ini. Google Maps memang akan menampilkan area abu-abu (grey) kalau ditempatkan di elemen dinamis. Oleh karna itu, kita perlu memanggil fungsi “resize” ketika animasi modal sudah selesai.

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Marker sering digunakan untuk menandai sebuah lokasi. Biasanya sering digunakan dalam membuat aplikasi Geolocation. Pada kesempatan ini, kita akan belajar membuat marker di Google Maps dan melakukan beberapa modifikasi. Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba. Sudah siap? Mari kita mulai… Mengenal Objek MarkerMarker merupakan sebuah objek yang bisa kita buat dengan kode berikut: var marker = new google.maps.Marker({ position: new google.maps.LatLng(-8.5830695,116.3202515), map: peta }); Terdapat dua properti penting yang harus diberikan ke marker:

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Cara Menggunakan highlight.js di Blogger

Cara Menggunakan highlight.js di Blogger

Template baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna. Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger. 1. Memasang higlight.

Mengambil Nilai dari Select/Option dengan JQuery

Mengambil Nilai dari Select/Option dengan JQuery

Pada sebuah kasus, kita menggunakan elemen <select> dan <option> sebagai input dalam form. Kita ingin: Setiap opsi yang terpilih akan memberikan data yang berbeda-beda. Misalnya kita punya form seperti ini ini: <form> <select name="package" id="package"> <option>Paket 1</option> <option>Paket 2</option> <option>Paket 3</option> </select> <h4>Anda memilih: <span id="selected"></span></h4> </form> Nah, saat kita memilih Paket, kita ingin mengambil data dari opsi yang dipilih. Kita bisa saja melakukannya seperti ini: $('#package').on('change', function(){ const selectedPackage = $('#package').