Cara Instal CKEditor4 Di Textarea

by | Dec 15, 2017 | CSS, HTML, Tips dan Trik, Website | 0 comments

Pada kesempatan kali ini saya akan menjelaskan cara Instal CKEditor4 di Textarea. Perlu teman-teman ketahui sebelumnya, CKEditor adalah editor WYSIWYG cross-browser gratis (apa yang Anda lihat adalah apa yang Anda dapatkan). Dengan hanya beberapa baris sederhana kode JavaScript, teman-teman dapat dengan mudah mengganti <textarea> dengan editor WYSIWYG tersebut. CKEditor4 merupakan salah satu Text Editor yang cukup handal dan powerfull. Hingga saat ini tersedia beberapa plugins Text Editor yang bisa teman-teman gunakan di Textarea website yang teman-teman gunakan, contohnya seperti Tinymce, openWYSIWYG, WYMEditor, dan masih banyak lagi yang lainnya. Namun pada penjelasan disini saya menggunakan CKEditor4 untuk Textarea website yang saya buat. Dan untuk melakukan instalasi Text Area CKEditor teman-teman dapat mengikuti beberapa langkah yang saya berikan dibawah ini.

Berikut Langkah-Langkahnya :

  • Teman-teman download CKEditor4 terlebih dahulu pada link berikut “http://www.openwebware.com/download”, dan pilih yang Full Package.
  • Setelah selesai teman-teman download, extract terlebih dahulu file tersebut sejajar di dalam folder project website teman-teman.
  • Ubah nama folder tersebut menjadi ckeditor.
  • Jika sudah, teman-teman buka file index.html atau file index.php website teman-teman, dan tambahkan kode seperti berikut :
	<script src="ckeditor/ckeditor.js"></script>
	<script src="ckeditor/samples/js/sample.js"></script>
	<link rel="stylesheet" href="ckeditor/samples/css/samples.css">
	<link rel="stylesheet" href="ckeditor/samples/toolbarconfigurator/lib/codemirror/neo.css">
  • Tambahkan kode seperti kode diatas tepat diatas tag </head> file index.html atau file index.php website teman-teman.
  • Tambahkan lagi kode dibawah ini, tepat dibawah kode <body> file index.html atau file index.php website teman-teman, berikut kodenya
<script>
initSample();
</script>
  • Jika sudah save file tersebut, dan teman-teman buka file tempat komponen Textarea yang ada di website teman-teman.
  • Selanjutnya tambahkan kode attribute id=’editor’ pada komponen Textarea tersebut, sehinga kode Textarea nya menjadi seperti berikut :
<textarea name='sesuaikan_dengan_nama_yang_teman-teman_buat' id='editor'> </textarea>
  • Jika sudah teman-teman bisa save terlebih dahulu file tersebut, dan lihat hasilnya di browser yang teman-teman gunakan, pada contoh disini browser yang saya gunakan adalah browser Mozilla Firefox.

Jika tidak ada kesalahan atau tidak ada langkah-langkah yang terlewat dari tahapan di atas, maka saya asumsikan teman-teman sudah berhasil melakukan instalasi Text Editor ckeditor tersebut, karena sebelumnya sudah saya uji dan berjalan di komputer saya.

Sampai disini penjelasan saya mengenai cara Instal CKEditor4 di Textarea, semoga bermanfaat.