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

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

Metode dan Algoritma | WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder (Pemrograman Web Javascript PHP) . Anda bisa melakukan konsultasi tentang WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder (Pemrograman Web Javascript PHP) melalui form di samping kanan !!!

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> </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 :

Amazon.com Widgets

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.

ActionScript AS3 ASP.NET AJAX C / C++ C# Clipper COBOL ColdFusion DataFlex Delphi Emacs Lisp Fortran FoxPro Java J2ME JavaScript JScript Lingo MATLAB Perl PHP PostScript Python SQL VBScript Visual Basic 6.0 Visual Basic .NET Flash MySQL Oracle Android

Related Post :

Judul: WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder (Pemrograman Web Javascript PHP)
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh hank2

Anda sedang membaca artikel tentang WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder (Pemrograman Web Javascript PHP), Semoga artikel tentang WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder (Pemrograman Web Javascript PHP) ini sangat bermanfaat bagi teman-teman semua, jangan lupa untuk mengunjungi lagi melalui link WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder (Pemrograman Web Javascript PHP).

Posted by: Metode Algoritma Updated at: 20.23

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

{ 0 komentar... Views All / Send Comment! }

Posting Komentar

Label