Pada aplikasi web sering sekali kita gunakan What You See Is What You Get Editor (WYSIWYG Editor). Masalah yang sering dihadapi adalah bagaimana jika kita membutuhkan untuk menyisipkan Gambar diantara tulisan yang kita buat dengan editor tsb. Misalnya kita buat soal online yang membutuhkan Gambar Soal dsb.
WYSIWYG Editor yang paling banyak digunakan masih TinyMCE dan CKeditor. Nah kali ini coba kita bahas penggunaan CKEditor yang digabungkan dengan plugin CKFinder sehingga Editor tersebut mampu menyisipkan gambar, mengupload gambar dan memakai gambar yang sudah pernah dipakai dan ada di server.
Langkah pertama download dahulu CKEditor dari web resminya. Kemudian download juga CKFinder versi demo dari websitenya. Setelah itu extract file nya masing masing di root folder htdocs / www / public_html, sehingga tampak sebagai berikut :
Kemudian untuk mengetes CKEditor sudah berjalan bisa dengan menjalankan URL http://localhost/ckeditor/_samples/fullpage.html. Sehingga tampak tampilan sebagai berikut :
Kemudian CKFinder harus sedikit dikonfigurasi, buka /ckfinder/config.php edit bagian ini, ubah return false menjadi return true :
function CheckAuthentication()
{
return true;
}
CKFinder memperbolehkan pengguna mengupload file apa saja, sehingga untuk mengamankan server web paling tidak harus diberi keamanan akses dengan login, menggunakan session dsb. Kode programnya silakan ditempatkan dia atas return true, jadi jika gagal login berarti return false; dan CKEditor tidak akan mau mengupload gambar.
Coba mengupload gambar pada Tab Upload :
Kemudian gambar bisa dipakai di dalam editor dipakai :
Kemudian Gambar yang telah Terupload di Server bisa dipakai (diinsertkan) kembali tanpa harus mengupload ulang :
Nah setelah halaman sampel telah berjalan dengan baik, coba kita pakai di halaman web kita. Caranya yang sederhana bisa dilakukan dengan meng-copy file ckfinder/_samples/ckeditor.html dan ckfinder/_samples/sample.css ke folder web kita misal /webku/ sehingga tercopy menjadi file /webku/editor.php dan /webku/sample.css. Nah, tinggal mengedit editor.php misalnya menjadi seperti di bawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td>Pertanyaan</td>
<td><textarea id="pertanyaan" name="pertanyaan" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan A</td>
<td><textarea id="pilihana" name="pilihana" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan B</td>
<td><textarea id="pilihanb" name="pilihanb" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan C</td>
<td><textarea id="pilihanc" name="pilihanc" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan D</td>
<td><textarea id="pilihand" name="pilihand" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan E</td>
<td><textarea id="pilihane" name="pilihane" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Kunci Jawaban</td>
<td><label>
<input type="text" name="jawaban" id="jawaban" />
</label></td>
</tr>
<tr>
<td>Penjelasan</td>
<td><textarea id="penjelasan" name="penjelasan" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="button" id="button" value="Simpan" />
</label></td>
</tr>
</table>
</form>
<script type="text/javascript">
// This is a check for the CKEditor class. If not defined, the paths must be checked.
if ( typeof CKEDITOR == 'undefined' )
{
document.write(
'<strong><span style="color: #ff0000">Error</span>: CKEditor not found</strong>.'); /* +
'This sample assumes that CKEditor (not included with CKFinder) is installed in' +
'the "/ckeditor/" path. If you have it installed in a different place, just edit' +
'this file, changing the wrong paths in the <head> (line 5) and the "BasePath"' +
'value (line 32).' ) ; */
}
else
{
var editor = CKEDITOR.replace( 'pertanyaan' );
editor.setData( '<p></p>' );
var editor2 = CKEDITOR.replace( 'pilihana' );
editor2.setData( '' );
var editor3 = CKEDITOR.replace( 'pilihanb' );
editor3.setData( '' );
var editor4 = CKEDITOR.replace( 'pilihanc' );
editor4.setData( '' );
var editor5 = CKEDITOR.replace( 'pilihand' );
editor5.setData( '' );
var editor6 = CKEDITOR.replace( 'pilihane' );
editor6.setData( '' );
var editor7 = CKEDITOR.replace( 'penjelasan' );
editor7.setData( '<p></p>' );
// Just call CKFinder.setupCKEditor and pass the CKEditor instance as the first argument.
// The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
CKFinder.setupCKEditor( editor, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor2, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor3, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor4, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor5, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor6, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor7, '/ckfinder/' ) ;
// It is also possible to pass an object with selected CKFinder properties as a second argument.
// CKFinder.setupCKEditor( editor, { basePath : '../', skin : 'v1' } ) ;
}
</script>
</body>
</html>
Perhatikan bahwa kita bisa membuat textarea pada halaman tersebut lebih dari satu :
<tr>
<td>Pertanyaan</td>
<td><textarea id="pertanyaan" name="pertanyaan" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan A</td>
<td><textarea id="pilihana" name="pilihana" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan B</td>
<td><textarea id="pilihanb" name="pilihanb" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan C</td>
<td><textarea id="pilihanc" name="pilihanc" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan D</td>
<td><textarea id="pilihand" name="pilihand" rows="10" cols="80"></textarea></td>
</tr>
<tr>
<td>Pilihan E</td>
<td><textarea id="pilihane" name="pilihane" rows="10" cols="80"></textarea></td>
</tr>
tetapi jangan lupa mengedit javascript konfigurasi CKEditor juga lebih dari satu :
var editor = CKEDITOR.replace( 'pertanyaan' );
editor.setData( '<p></p>' );
var editor2 = CKEDITOR.replace( 'pilihana' );
editor2.setData( '' );
var editor3 = CKEDITOR.replace( 'pilihanb' );
editor3.setData( '' );
var editor4 = CKEDITOR.replace( 'pilihanc' );
editor4.setData( '' );
var editor5 = CKEDITOR.replace( 'pilihand' );
editor5.setData( '' );
var editor6 = CKEDITOR.replace( 'pilihane' );
editor6.setData( '' );
var editor7 = CKEDITOR.replace( 'penjelasan' );
editor7.setData( '<p></p>' );
Dan jangan lupa juga mengedit konfigurasi lokasi CKFinder untuk semua TextArea tersebut :
CKFinder.setupCKEditor( editor, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor2, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor3, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor4, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor5, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor6, '/ckfinder/' ) ;
CKFinder.setupCKEditor( editor7, '/ckfinder/' ) ;
Hasilnya :
Link berikut ini adalah project web koleksi pribadi penulis yang berjalan menggunakan ckeditor dan ckfinder. Jika ingin memakai CKEditor dan CKFinder silakan mendownload sendiri dari link resminya di atas.
Semoga berguna.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
