Cara Menggunakan CKEditor Untuk Membuat Text Editor Pada Website

Cara Menggunakan CKEditor Untuk Membuat Text Editor Pada Website

Halo semuanya, kali ini kita akan belajar membuat sebuah form dengan text editor yang memiliki banyak fitur. Ada cukup banyak plugins yang menyediakan text editor WYSIWYG (What You See Is What You Get) seperti CKEditor, TinyMCE, dan lainnya. Nah, kali ini saya ingin memberikan sedikit ilmu bagaimana cara membuat text editor pada website dengan menggunakan CKEditor.

CKEditor sendiri adalah sebuah plugin/library yang dibuat menggunakan JavaScript. CKEditor juga merupakan salah satu plugin yang gratis dan open-source. Berikut ini adalah cara membuat text editor yang memiliki banyak fitur dengan CKEditor.

Pertama, download CKEditor terlebih dahulu. Anda bisa memilih package yang tersedia. Di sini saya akan coba ambil Full Package. Lalu, klik Download.

Setelah itu, ekstrak file CKEditor yang sudah anda download tadi ke dalam folder project anda. Di sini saya contohkan saya mengekstrak CKEditor di dalam folder latihan_ckeditor beserta file index.php yang akan saya buat.

Buat file bernama index.php di folder latihan_ckeditor. Setelah itu siapkan form yang berisi text editor. Berikut ini adalah contoh kodenya.

<style type="text/css">
  div.form-group {
    margin: 10px;
    width: 700px;
  }
</style>

<form action="" method="POST">
  <div class="form-group">
    <label>Kritik dan Saran</label>
      <textarea id="kritiksaran" name="kritiksaran"></textarea>
  </div>
</form>

Pada contoh form di atas saya membuat form Kritik dan Saran. Setelah itu kita bisa memanggil ckeditor.js agar bisa mengubah bentuk text editor-nya dengan kode.

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

Setelah itu tambahkan script JavaScript untuk mengubah bentuk text editor-nya dengan kode.

<script type="text/javascript">
     CKEDITOR.replace( 'kritiksaran' );
</script>

Sehingga full code-nya menjadi seperti ini.

<style type="text/css">
  div.form-group {
    margin: 10px;
    width: 700px;
  }
</style>

<form action="" method="POST">
  <div class="form-group">
    <label>Kritik dan Saran</label>
      <textarea id="kritiksaran" name="kritiksaran"></textarea>
  </div>
</form>

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
     CKEDITOR.replace( 'kritiksaran' );
</script>

Untuk kritiksaran, itu adalah id dari tag textarea-nya. Jika id anda berbeda maka sesuaikan saja.

Setelah itu buka index.php anda di browser.

Yap, selesai sudah, text editor terlihat lebih efisien dengan fitur-fiturnya bukan?

Text editor tersebut terlihat lebih elegan dibandingkan menggunakan tag textarea biasa.

Semoga artikel kali ini bermanfaat.