Kali ini saya akan memberitahukan bagaimana cara menggunakan editor WYSIWYG pada situs web, tidak perlu menjadi master coding untuk menggunakan ini. Setelah membaca artikel ini pasti bisa menerapkan WYSIWYG di situs web, gampang! Tapi sebelum itu, biar makin jos sebaiknya kita bahas dulu sedikit “Apa itu WYSIWYG ?“.
Apa Itu WYSIWYG ?
WYSIWYG Editor merupakan singkatan dari What You See Is What You Get Editor yang artinya layar pengeditan dengan komponen lengkap sehingga apa yang kita gunakan tersedia langsung ada di satu tempat, contohnya Microsoft Word. Editor ini sangat berguna ketika ingin melakukan pengetikkan yang memerlukan banyak komponen didalamnya seperti huruf tebal, masukkan gambar, masukkan link, merubah warna, penjajaran teks, gaya teks, dsb.
WYSIWYG ini memiliki bar biasanya dibagian atas editor (contoh: Microsoft Word / WordPress / Blogspot), bar ini yang menjadi faktor utama kenapa editor tersebut disebut WYSIWYG. Tapi posisi bar ini bukan menjadi persoalan utama yang terpenting adalah fungsinya, harus berjalan dengan baik dan penempatannya yang pas. (lihat gambar)
Cara Menggunakan WYSIWYG di HTML (TinyMCE & CKEditor)
Diawal artikel sudah dijelaskan, untuk menerapkan ini tidak perlu hebat coding artinya kita akan menggunakan frame (embed) dari situs penyedia WYSIWYG (gratis). Ada 3 layanan embed WYSIWYG Editor yang populer dan gratis untuk digunakan di situs web, lihat: 3 Layanan WYISWYG Gratis Terbaik.
Baca Juga:
Akan dijelaskan cara penggunaan WYSIWYG dari 3 layanan tersebut, silahkan pilih layanan yang kalian gunakan, disini saya berikan contoh menggunakan TinyMCE dan CKEditor:
#1 Menerapkan WYSIWYG Editor di HTML Menggunakan TinyMCE
Pertama, silahkan copy code berikut di dalam HTML dimana kalian ingin menampilkan WYSIWYG Editor:
<form method="post"> <textarea id="tinymceriobermano">Test TinyMCE dari RioBermano.com</textarea> </form>
Selanjutnya, copy code dibawah ini dan terapkan didalam bagian <head> HTML:
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#tinymceriobermano'
});
</script>
Simpan dan buka halaman dimana kalian menampilkan WYSIWYG Editor, berhasil !
Catatan: Script yang diterapkan diatas berupa link dan pasti perlu koneksi internet supaya berfungsi, jika ingin digunakan secara offline / dipanggil script dari root silahkan download script tinymce disini.
Masih bingung ? Lihat : Video tutorial cara menggunakan WYSIWYG TinyMCE.
Setelah berhasil di download, silahkan extract dan salin semua folder serta file yang ada didalam \tinymce\js\ ke root situs HTML (misalnya di paste di didalam \riobermano\tutorial-html\js). Pastikan janga ada yang sama antara nama folder dan file milik tinymce dengan yang kalian punya.
Setelah disimpan, tinggal panggil deh file tinymce.min.js di bagian <head>. Caranya ganti url script dibagian <head> yang berisi url yang mengarah ke tinymce dengan (contoh) <script src='js/tinymce.min.js'></script>sesuaikan root direktori dengan yang sebenarnya. Tidak tau cara memanggil file di HTML ? Lihat tutorialnya disini.
Masih bingung ? Lihat: Video tutorial cara menerapkan WYSIWYG TinyMCE di HTML.
#2 Menerapkan WYSIWYG Editor di HTML Menggunakan CKEditor
Pertama, copy ini kemudian tempelkan di bagian <head> HTML: <script src="//cdn.ckeditor.com/4.7.0/standard/ckeditor.js"></script>kemudian copy code dibawah ini dan tempelkan di bagian HTML dimana kalian ingin menampilkannya:
<form method="post"> <textarea name="ckeditor" id="ckeditorriobermano">CKEditor nih, copy codenya di riobermano.com .</textarea><script> CKEDITOR.replace( 'ckeditorriobermano' );</script> </form>
Save dan lihat hasilnya !
Pada script diatas menggunakan versi standar, jika ingin menggunakan versi lain bisa lihat disini. Pilih versi yang ingin digunakan kemudian salin kode script nya dan timpa script standar ini.
Catatan: script yang digunakan diatas berupa URL yang memerlukan koneksi internet, jika ingin menggunakan secara offline silahkan download CKEditor disini kemudian extract. Masih bingung ? Lihat: Video tutorial cara menerapkan WYISWYG CKEditor di HTML.
Setelah berhasil di extract, pindahkan folder ckeditor (hasil extract) ke direktori HTML. Kemudian timpa URL script diatas tadi dengan memanggil file ckeditor.js (contoh: \rio\ckeditor\ckeditor.js).
2 editor diatas merupakan open source jadi bisa digunakan secara gratis, tapi ada juga versi berbayarnya dengan fitur yang sangat bisa disesuaikan. Setelah menerapkan WYSIWYG Editor, tampilan textarea HTML yang tadinya biasa saja sekarang menjadi luar biasa dengan tambahan WYSIWYG tab.
Harap diingat, artikel ini hanya menjelaskan bagaimana cara menerapkannya saja tidak dengan penggunaan sistemnya seperti menyimpan / upload hasil / lainnya.
Selamat mencoba !