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 sesuaikan 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