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.


Diposting oleh di
Label: , ,

11 komentar:

  1. Unknown5 Desember 2012 pukul 20.21

    bro.... ngesave nya gimana

    BalasHapus
  2. Nur Amijaya22 April 2013 pukul 17.33

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

    BalasHapus
  3. Unknown29 April 2013 pukul 03.19

    cara menampilkan folder gambar bagaimana biar tidak upload gambar lagi

    BalasHapus
  4. Nur Amijaya3 Mei 2013 pukul 18.28

    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. Unknown8 Juli 2013 pukul 00.18

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

    BalasHapus
    Balasan
    1. Nur Amijaya17 Juli 2013 pukul 22.27

      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. Unknown10 Agustus 2013 pukul 19.41

    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. Nur Amijaya11 Agustus 2013 pukul 05.30

      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. Shinichi Syarief Fabregaz13 Desember 2013 pukul 06.40

    gan..
    cara get value nya gimana..?

    BalasHapus
  8. Nur Amijaya1 Februari 2014 pukul 02.48

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

    BalasHapus
  9. kazama17 Februari 2014 pukul 01.27

    kok saya tidak bisa ngsave ya??

    BalasHapus

Langganan: Posting Komentar (Atom)