Tutorial Integrasi CKEditor Dan CKFinder

Banyak sekali library text editor WYSIWYG yang tersedia, termasuk CKEditor. Kita akan bahas bagai...
Penulis
Admin
Kategori
Tutorial
Estimasi
3 menit baca
Dilihat
2.7K
Posting
03 Jun 2021
Tutorial Integrasi CKEditor Dan CKFinder Banyak sekali library text editor WYSIWYG yang tersedia, termasuk CKEditor. Kita akan bahas bagaimana cara integrasi CKEditor dengan CKFinder dengan mudah Tutorial Integrasi CKEditor Dan CKFinder
2022-11-25

Mungkin dari kalian ada yang bingung untuk menentukan text editor WYSIWYG mana yang cocok untuk kamu gunakan dalam membuat konten dalam website kamu, terdapat banyak sekali text editor WYSIWYG open-source yang tersedia, ada TinyMCE, Summernote, termasuk CKEditor. Kita akan bahas bagaimana cara integrasinya dengan CKFinder dengan mudah 

Kali ini kita akan bahas bagaimana cara install CKEditor berserta CKFinder yang berfungsi untuk mengupload gambar didalam konten kamu.

 

 

CKEditor Logo

 

1. Apa itu CKEditor

CKEditor merupakan library javascript text editor yang dapat menentukan format sesuai dengan yang kita inginkan, dengan menambahkan link, gambar, embed video tanpa harus membuatnya secara manual. Kebayangkan bagaimana ribetnya jika membuat konten secara manual dengan menyisipkan html untuk mengatur text dalam konten tersebut agar menarik. maka dari itu CKEditor ini adalah solusinya.

CKEditor merupakan sistem WYSIWYG atau (What You See Is What You Get) yang maksudnya kamu dapat membuat suatu konten text dengan berbagai format HTML tanpa harus kamu buat secara manual, dengan kata lain segala proses editing dalam hal membuat text menjadi H1 atau H2, merubah posisi menjadi ditengah atau rata kiri, membuat text menjadi bold atau italic, mengubah text menjadi link URL akan diproses oleh CKEditor. Fungsi dari text editor ini mirip seperti Microsoft Word.

Sebelum berkenalan lebih jauh dengan library yang satu ini, ada beberapa jenis yang bisa kamu gunakan yaitu:

  • Basic

Memiliki total dengan ukuran file yang bisa dibilang ringan namun dengan fitur yang sedikit

  • Standard

­Memiliki total dengan ukuran file yang sedang dengan fitur yang standard.

  • Full

Memiliki fitur yang lengkap namun dengan total ukuran file yang besar

Dengan ketiga jenis CKEditor yang disediakan, kamu bisa menentukan jenis paket yang sesuai untuk website kamu dengan fitur yang beragam.

 

CKFinder logo

 

2. Lalu apa itu CKFinder

CKFinder merupakan plugins pada CKEditor yang berfungsi untuk mengupload dan memanage suatu file atau gambar kedalam konten kamu secara otomatis dan tersimpan pada server. Tools ini bisa mengubah ukuran gambar, menambahkan konten dalam alt pada gambar dan lainnya.

CKFinder tidak include bersama dengan CKEditor, kita harus memasangnya secara manual, diakhir nanti kita bahas bagaimana cara mengintegrasinya dengan CKEditor.

 

3. Bagaimana cara install CKEditor

Download CKEditor versi terbaru disitus resmi bisa klik situs CKEditor, untuk kali ini kita gunakan yang versi standard karena akan dihubungkan dengan CKFinder untuk fitur upload gambar.

Extract file .zip yang baru saja didownload dalam satu folder bersama index.html

 

Cara mengunakan CKEditor Dan Integrasi CKFinder Dengan Mudah

 

Buka index.html di text code editor kesayangan kamu, lalu sisipkan beberapa fungsi agar library ini bekerja.

<!DOCTYPE html>
<html>
<head>
    <title>Cara menghubungkan CKeditor ke Website</title>
</head>
<body>
<div class="main">
    <textarea class="form-control" id="kontenku"></textarea>
</div>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'kontenku' );
</script>
</body>
</html>

Point penting yang kita harus lakukan disini adalah wajib menyisipkan file javascript ckeditor.js yang terdapat pada folder CKEditor, path source urlnya jangan sampai salah ya karena CKEditor tidak akan berfungsi jika file utama tidak terload.

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

Lalu tambahkan script penting lainnya, isi nama element yang sesuai dengan nama id ditextarea, seperti contoh code dibawah ini, yang juga nantinya kita akan hubungkan dengan CKFinder.

<textarea class="form-control" id="kontenku"></textarea>

<script>
    CKEDITOR.replace( 'kontenku' );
</script>

 

Hasilnya, coba reload browser kamu.. maka tampilan textarea kamu akan berubah seperti ini, dan CKEditor pun sudah berhasil terpasang diwebsite kamu.

 

Cara mengunakan CKEditor Dan Integrasi CKFinder Dengan Mudah

 

Namun dengan CKEditor yang baru kita pasang, kita hanya bisa mengolah text saja, jika ingin menampilkan sebuah gambar, kita harus menambahkannya secara manual atau memasukan alamat url gambar tersebut kedalam form image, dimana file gambar harus sudah tersedia diserver. Solusi terbaik selanjutnya adalah kita harus integrasikan CKEditor yang sudah terpasang dengan plugins CKFinder agar kita mudah untuk mengupload dan memanage gambar yang ingin kita tambahkan secara otomatis keserver.

 

4. Bagaimana cara untuk integrasi dengan CKFinder

Setelah CKEditor berhasil terpasang dengan sempurna, Langkah pertama kita download CKFinder versi terbaru disitus resminya CKFinder Download Extract file rar yang baru saja didownload lalu tempatkan bersamaan dengan folder CKEditor.

 

Cara mengunakan CKEditor Dan Integrasi CKFinder Dengan Mudah

 

Lalu buka Kembali index.html di text code editor kesayangan kamu dan sisipkan beberapa script tambahan agar CKFinder bekerja di CKEditor

<!DOCTYPE html>
<html>
<head>
    <title>Cara menghubungkan CKeditor ke Website</title>
</head>
<body>
<div class="main">
    <textarea class="form-control" id="kontenku"></textarea>
</div>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
<script>
    var editor = CKEDITOR.replace( 'kontenku' );
    CKFinder.setupCKEditor( editor );
</script>
</body>
</html>

Yang pertama kita sisipkan file JavaScript ckfinder.js dari folder CKFinder kedalam index.html path source urlnya jangan sampai salah ya. Kita integrasikan CKFinder dengan CKEditor dengan menambahkan beberapa script tambahan di penutup yaitu

var editor dan CKFinder.setupCKEditor( editor );

Script lengkapnya seperti ini:

<script>
    var editor = CKEDITOR.replace( 'kontenku' );
    CKFinder.setupCKEditor( editor );
</script>

Terakhir, buka folder CKFinder, dan buka config.php, cari bagian:

$config['authentication'] = function () {
    return false;
};

Ubah menjadi true

Maka hasilnya akhirnya akan menjadi seperti ini:

 

Cara mengunakan CKEditor Dan Integrasi CKFinder Dengan Mudah

Cara mengunakan CKEditor Dan Integrasi CKFinder Dengan Mudah

 

Kesimpulan

Sekarang kamu bisa mengupload gambar di CKEditor dengan mengunakan plugin CKFinder dengan mudah tanpa harus mengupload manual ke server. Sekian tutorial kali ini, semoga dengan adanya CKEditor kamu selalu bisa membuat konten menarik di website kamu.

Share