Cara Memasang TextEditor CKEDITOR

Assalamualaikum, halo para pembaca dokumenary.net… ☺

Senang sekali rasanya saya Almazari bisa menyapa kembali teman – teman semua. Semoga apa yang sedang anda cari, blog ini bisa memberikan setidaknya sedikit informasi yeng dapat membantu.

Pada kesempatan kali ini, kita akan sama-sama mempelajari bagaimana sih caranya memasang library javascript bernama CKEDITOR pada halaman web kita.

What you see is what you get (WYSIWYG) ini merupakan istilah yang sering digunakan untuk menggambarkan jawaban dari pertanyaan apa sih texteditor itu? Untuk gampangnya, Anda tentunya sudah pernah menggunakan Microsoft word atau semacamnya kan? ya itu, jadi apa yang kita tulis di ms word ya itu yang kita dapatkan, hasilnya sangat persis, kita tidak perlu mengetahui kode sebenarnya untuk menampilkan sebuah kata menjadi tebal, miring, garis bawah dan lain sebagainya. Nah CKEDITOR ini memiliki fungsi yang sama dengan ms word, namun beda alam.

Sebenarnya sudah banyak javascript library untuk texteditor lain yang serupa seperti
Tinymce, Bootstrap wysiwyg, Quill, Froala, Summernote dan lain-lain.

Masing – masing memiliki kelebihan dan kekurangan namun memiliki fungsi sama. Tentu jika kita sebagai developer kita ambil yang paling mudah digunakan dan powerfull… oh ya plus gratis, hehe. Untuk itu posting kali ini kita hanya akan membahas CKEDITOR saja, bukan berarti editor lain tidak bagus lo ya.

Fitur CKEDITOR kalo saya lihat sudah lengkap, standarnya juga sudah bagus. Kelebihan yang saya temukan adalah, kita dimudahkan sekali saat ingin menggunakan library ini, misalnya:

  • Kita dapat dengan mudah mengatur toolbar yang akan kita tampilkan pada texteditor, karena mereka sudah menyediakan alat untuk mengatur toolbar disini.
  • Jika kita membutuhkan plugins atau istilahnya fungsi lain yang belum ada pada paket standartnya, coba kita cari dulu diplugins list yang ada disini, mana tau sudah ada yang buat. Saya sebelumnya juga sudah mencoba mencari beberapa plugins salah satunya plugin untuk memasukkan file suara bertipe .mp3 dan ternyata sudah ada, tinggal pasang saja.
  • Dokumentasinya jelas banget, baik untuk fungsi-fungsi yang ada dieditornya, maupun plugins yang akan kita pasang.
  • Sudah banyak yang menggunakan, artinya sudah banyak pembahasan mengenai editor ini terutama distackoverflow.
  • Saya merasa mudah saat mengkonfigurasi dan memasangnya.

Dan berikut langkah – langkah memasang CKEDITOR:

  1. Download CKEDITOR di http://ckeditor.com/download, pilih Full Package saja.
    download-ckeditor

  2. Pindahkan folder ckeditor ke assets aplikasi web kita, misalnya struktur folder projek seperti berikut:
    struktur-folder

    Download juga jquery dan masukkan ke folder assets/jquery

  3. Misalkan saya membuat file index.html sejajar dengan folder assets, maka memanggil ckeditor cukup mudah: 
    <!-- panggil jquery -->
<script type="text/javascript" src="assets/jquery/jquery-3.1.1.min.js"></script>
<!-- panggil ckeditor.js -->
<script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>
<!-- panggil adapter jquery ckeditor -->
<script type="text/javascript" src="assets/ckeditor/adapters/jquery.js"></script>
<!-- setup selector -->
<script type="text/javascript">
	$('textarea.texteditor').ckeditor();
</script>

    Ini contoh full codenya:

    <!DOCTYPE html>
<html>
<head>
	<title>Cara Memasang TextEditor CKEDITOR</title>
</head>
<body>
	<form>
		<p>Isi Berita:</p>
		<p>
			<textarea name="berita" class="texteditor"></textarea>
		</p>
		<p><button type="submit">SIMPAN</button></p>
	</form>
	
	<!-- panggil jquery -->
	<script type="text/javascript" src="assets/jquery/jquery-3.1.1.min.js"></script>
	<!-- panggil ckeditor.js -->
	<script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>
	<!-- panggil adapter jquery ckeditor -->
	<script type="text/javascript" src="assets/ckeditor/adapters/jquery.js"></script>
	<!-- setup selector -->
	<script type="text/javascript">
		$('textarea.texteditor').ckeditor();
	</script>
</body>
</html>

    Maka hasilnya akan seperti berikut:
    contoh-ckeditor

    Cukup menambahkan class=”texteditor” pada attribute form textarea saja ckeditor sudah terpanggil. Jika dalam satu halaman ada dua class texteditor maka texteditornya juga muncul dua.

    4. Mudah kan ya… projek yang kita bangun menjadi lebih apik.

    Bagi pengguna framework codeigniter, jika ingin memasang ckeditor pada framework codeigniternya konsepnya juga sama saja, tinggal ganti cara pemanggilan path lokasinya saja menjadi seperti berikut:

    <!-- panggil jquery -->
<script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-3.1.1.min.js'); ?>"></script>
<!-- panggil ckeditor.js -->
<script type="text/javascript" src="<?php echo base_url('assets/ckeditor/ckeditor.js'); ?>"></script>
<!-- panggil adapter jquery ckeditor -->
<script type="text/javascript" src="<?php echo base_url('assets/ckeditor/adapters/jquery.js'); ?>"></script>
<!-- setup selector -->
<script type="text/javascript">
	$('textarea.texteditor').ckeditor();
</script>

    Cara mengganti toolbar ckeditor

    Kita dapat mengatur toolbar ckeditor sesuai dengan keinginan kita, caranya pakai tool yang sudah disediakan pada file yang kita download, tool tersebut terletak difolder samples/toolbarconfigurator. Jadi kita tinggal memanggilnya pada alamat http://localhost/nama_folder_projek/assets/ckeditor/samples/toolbarconfigurator/#basic

    toolbar-config

    Dengan menggunakan tool tersebut, kita dapat merubah posisi atau mendisable fungsi yang kita anggap tidak perlu.

    Setelah mengatur sesuai dengan keinginan kita, cara mendapatkan codenya dengan cara klik tombol Get Toolbar Config maka akan diberikan code toolbarnya. Copy dan paste pada file assets/ckeditor/config.js.

    Cara menginstall addon/plugin

    Misalkan kita membutuhkan plugin tambahan untuk insert video youtube pada editor kita, hal tersebut cukup mudah untuk dilakukan. Berikut langkah – langkahnya:

    Pertama, kita cari pluginnya di http://ckeditor.com/addons/plugins/all, masukkan kata kunci “youtube video” kedalam field search, maka akan ditampilkan plugin – plugin untuk youtube.

    Kedua, sebagai contoh, saya download salah satu plugin bernama Youtube Plugin, kemudian extract dan pindahkan folder youtube kedalam folder assets/ckeditor/plugins/.

    Kediga, tambahkan config.extraPlugins = ‘youtube’; pada file assets/ckeditor/config.js. 

    CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.extraPlugins = 'youtube';
};

    Maka akan dijumpai icon baru seperti ini youtube-icon pada editor.

    Studi Kasus : Menyimpan form ckeditor menggunakan ajax

    Ada kalanya kita membutuhkan ajax untuk memproses sebuah form yang salah satu fieldnya menggunakan ckeditor, jika tidak menggunakan ajax ya tinggal post saja ke url form action tujuan. Tetapi jika menggunakan ajax, kita perlu mengetahui bangaimana caranya mendapatkan content yang sudah ditulis dieditor untuk diproses insert kedalam database.

    Agar setiap field dapat dibedakan, maka kita harus menambahkan attribute id pada field textarea kita, misalkan form textarea kita seperti ini:

    <p>Isi Berita:</p>
<p>
	<textarea name="berita" id="isi-berita" class="texteditor"></textarea>
</p>
<p><button type="submit" id="simpan">SIMPAN</button></p>

    Maka code jquery ajaxnya bisa dibuat seperti ini:

    <script type="text/javascript">
$(document).on('click', '#simpan', function() {
    var isi_berita = CKEDITOR.instances['isi-berita'].getData();
    $.ajax({
       type: "POST",
       url: "http://url-aksi-yang-menerima-post",
       data: {'berita': isi_berita },
       success: function (data) {
           alert("Berita berhasil disimpan.");
       }
    });
});
</script>

    Dengan begitu, skrip yang berfungsi menangkap post dapat mengambil variable $_POST[‘berita’] yang berisi berita yang sudah ditulis pada editor.

    Baik sepertinya sudah selesai posting kali ini, semoga bisa memberikan pencerahan dan tambahan informasi untuk teman – teman semua.

    Terimakasih ya sudah mampir kemari, jika ada yang belum jelas silakan berkomentar untuk kita diskusikan sama – sama.

    Maturnuwun, Assalamulaikum wr.wb

    Category: Javascript, Uncategorized

    Tags: , , , , ,

Comments

  1. nova
    February 23, 2017 - 8:23 am

    kalo mau menabahkan font arabic sama hanacara gimana mas caranya?

    Reply ↓

  2. Ibenk Jeany
    June 18, 2017 - 6:07 pm

    mas,, sudah sy tes youtube pluginx.. tapi gak ada lagi mas.. apa ada yg salah mas?? makasih untuk solusinya

    Reply ↓

  3. sitierliana
    August 18, 2017 - 3:28 pm

    mas ko cek editornya ga kepanggil sih

    Reply ↓

  4. Johan Santri
    November 10, 2017 - 11:21 am

    terima kasih mas atas artikel ini, saya sudah bisa memasang ckeditor, namun ketika saya coba dengan ajax, mengapa data yang di ckeditor tidak terpangil ya,
    kalau kiranya ada waktu mohon dibantu ya mas.

    Reply ↓

    • Almazari
      November 10, 2017 - 11:31 am

      Apa sudah seperti contoh:

      var isi_berita = CKEDITOR.instances['isi-berita'].getData();
    $.ajax({
       type: "POST",
       url: "http://url-aksi-yang-menerima-post",
       data: {'berita': isi_berita },
       success: function (data) {
           alert("Berita berhasil disimpan.");
       }
    });

      Kalo belum jalan coba dimasukkan alert dulu isi_berita nya, buat memastikan dapat isi editornya.
      alert(isi_berita);

      Reply ↓

  5. steve
    August 13, 2018 - 8:15 pm

    kalo edit/updatenya giaman bro script ajaxnya….thx

    Reply ↓

    • Almazari
      August 15, 2018 - 2:06 pm

      Ini bahasan beda mas, tergantung pakai bahasa apa, kalo PHP dan mysql berarti cari tutorial buat CRUD php.

      Reply ↓

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.