Pada kesempatan ini saya akan menjelaskan cara install plugins ckfinder di ckeditor. Perlu teman-teman ketahui sebelumnya, ckeditor adalah text editor yang digunakan dilingkungan website. ckeditor tersebut memiliki slogan WYSIWYG ( What You See Is What You Get ) dan sengaja dibuat untuk memudahkan penggunanya dalam melakukan manajemen konten yang berjalan disisi komponen form textarea. Mungkin kalian pernah menggunakan CMS seperti WordPress atau CMS lainnya yang dimana didalam text editor tersebut terdapat toolbar upload gambar, sama halnya ketika kalian menggunakan text editor CKeditor. Kalian bisa menggunakan addons CKFinder yang dapat berjalan disisi text editor tersebut, namun perlu kalian ingat yah dari addons CKFinder tersebut bukanlah bawaan dari text editor CKEditor, melainkan addons dari pihak ketiga yang dapat kalian gunakan secara bersamaan didalam text editor, dan addons tersebut sering diistilahkan dengan addons file manager.
Untuk menggunakannya kalian bisa melakukan tahapan seperti yang saya berikan dibawah ini :
- Langkah utama yang harus kalian lakukan adalah melakukan instalasi text editor CKEditor terlebih dahulu
- Kalian bisa download terlebih dahulu plugins CKEditor, jika sudah selanjutnya kalian bisa exstract file yang sudah kalian download tersebut
- Pindahkan kedalam root directory folder project kalian
- Jika sudah selanjutnya kalian bisa buat file baru dengan nama index.html
- Dan kalian bisa menuliskan kode seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cara Install Plugins Ckfinder Di CKeditor</title> <script src="ckeditor/ckeditor.js"></script> </head> <body> <form> <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea> <script> CKEDITOR.replace('editor1'); // attribute id komponen textarea </script> </form> </body> </html> |
- Jika sudah selanjutnya kalian bisa download addons CKFinder di alamat berikut https://ckeditor.com/ckfinder/download/
- Selanjutnya kalian extract file CKFinder tersebut dan letakan sejajar dengan folder CKEditor, seperti contoh dibawah ini :
- dan kalian bisa ubah code javascript sehingga menjadi seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cara Install Plugins Ckfinder Di CKeditor</title> <script src="ckeditor/ckeditor.js"></script> </head> <body> <form> <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea> <script> CKEDITOR.replace( 'editor1', { // attribute id komponen textarea filebrowserBrowseUrl: '/test/ckfinder/ckfinder.html', filebrowserImageBrowseUrl: '/test/ckfinder/ckfinder.html?Type=Images', filebrowserUploadUrl: '/test/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', filebrowserImageUploadUrl: '/test/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', filebrowserWindowWidth : '1000', filebrowserWindowHeight : '700' } ); </script> </form> </body> </html> |
- Selanjutnya kalian bisa buka file config.php yang ada di dalam folder CKFinder/config.php
- Dan ubah nilai false menjadi true pada kode baris ke 18 sehingga menjadi seperti berikut :
|
1 2 3 |
$config['authentication'] = function () { return true; }; |
- Selanjutnya pada line ke 69, pada kode ‘baseUrl’ => ‘/ckfinder/userfiles/’, diganti dan disesuaikan dengan lokasi folder templat gambar tersebut disimpan nantinya sehingga seperti berikut :
|
1 |
'baseUrl' => 'localhost/test/uploads/', |
- Selanjutnya buat folder baru dengan nama uploads yang sejajar dengan folder ckeditor dan ckfinder, dan folder tersebut adalah tempat gambar tersebut nantinya tersimpan.
- Jika sudah kalian bisa jalankan file index.php di browser, namun perlu kalian ingat yah, cara ini harus menggunakan web server dan harus berjalan di web server.
Sampai disini penjelasan saya mengenai cara install plugins ckfinder di ckeditor, semoga bermanfaat.