Selasa, 11 September 2012

WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder (Pemrograman Web Javascript PHP)

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.

Setelah selesai, untuk mengetes plugin CKFinder sudah berjalan pada CKEditor dapat dilakukan dengan menjalankan URL http://localhost/ckfinder/_samples/ckeditor.html, dengan catatan CKEditor sudah diletakkan di root folder web (htdocs atau www atau public_html). Karena halaman sampel pada CKFinder mengarah ke CKEditor di URL /ckeditor. Sehingga jika berjalan dan diklik Insert Image akan tampak tampilan berikut :


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>&nbsp;</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 &lt;head&gt; (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.


11 komentar:

  1. bro.... ngesave nya gimana

    BalasHapus
  2. Semoga bisa membantu, ini caranya http://cariprogram.blogspot.com/2013/04/cara-download-file-zip-docs-google-drive-mendownload-project-cariprogram.html

    BalasHapus
  3. cara menampilkan folder gambar bagaimana biar tidak upload gambar lagi

    BalasHapus
  4. setahu saya di insert image itu ada beberapa tab yang bisa browse gambar yg sudah terupload dan upload gambar baru mbak. coba silakan dicermati lagi..

    BalasHapus
  5. mas kok object not found ya...tlong dbntu mas

    BalasHapus
    Balasan
    1. Wah benar2 ckeditor tricky memang, kalau saya coba lagi pasti juga kesulitan lagi. Tetapi mungkin kesalahannya folder ckeditor dan ckfinder dua-duanya harus diletakkan di root folder web terluar yaitu di xampp/htdocs atau di appserv/www. Pokoknya paling luar, semoga berhasil..

      Hapus
  6. mas, saat saya mau upload gambar, terus ketik jelajah server(send it to the server) ternyata object not found.
    file "kfinder/kcfinder/browse.php " tidak ditemukan...
    gimana itu mas....

    BalasHapus
    Balasan
    1. Maaf, tapi penulis sudah lama sekali tidak menggunakan CKEditor ini, memang cara settingnya cukup rumit dan ada di berbagai tempat. Tetapi yang paling penting folder ckeditor dan ckfinder dua-duanya harus diletakkan di root folder web terluar yaitu di xampp/htdocs atau di appserv/www. Pokoknya contoh yang bisa didownload sudah penulis setting untuk berjalan dengan posisi CKEditor dan CKFinder di root web terluar, semoga berhasil mas..

      Hapus
  7. Seperti biasa saja, jika dari PHP dan menggunakan Method POST maka bisa didapatkan dengan $_POST['pertanyaan'], jika GET maka $_GET['nama_kolom'] ...

    BalasHapus
  8. kok saya tidak bisa ngsave ya??

    BalasHapus