Widodo

Integrasi CKeditor Dengan Ckfinder

Selamat Malam Para developer

Hari ini kita akan membahas sebuah Plugin Editor TextArea (CKedito)r,Ckeditor adalah suatu editor yang memungkinkan user untuk menentukan format, ukuran dan jenis huruf, menambahkan hyperlink dan tabel, dan juga bisa mengupload file, gambar, animasi flash, dan video dan saat ini banyak sekali WYSIWYG seperti TinyMCE, Sumernote, Elrte dll , tetapi yang mau saya bahas ini tentang Integrasi CKeditor dengan Ckfinder atau bisa disebut Images Manager, Sebenarnya sudah banyak tutorial yang bisa didapatkan di salah satu search engine seperti google dll, atau secara originalnya bisa membuka document dari situs CKeditor tetapi disana memakai bahasa asing harus siap2 translite, untuk itu saya memberi tutorialnya, sebenarnya penggabungan antara CKeditor dengan Ckfinder gak begitu susah bagi yang sudah pernah memasang Ckeditor, mungkin langsung saja kita praktekkan

Sebelumnya silahkan download CKEditor dan CKfinder dibawah ini

CKEDITOR CKFINDER

1. Setelah itu Silahkan Tambahkan script dibawah ini dan simpan diabwah texarea

 

CKEDITOR VERSI TERBARU

<script language="javascript">
CKEDITOR.replace( 'editor1',
filebrowserBrowseUrl : '../ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '../ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '../ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
filebrowserWindowWidth : '100%',
filebrowserWindowHeight : '700'});</script>

Pemanggilan : <textarea name="isi" rows="30" cols="60" id="editor1" ></textarea>

CKEDITOR VERSI 3.6.6.1

<script language="javascript">
CKEDITOR.replace( 'editor1',
{skin : 'v2',
filebrowserBrowseUrl : '../plugin/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '../plugin/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '../plugin/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '../plugin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '../plugin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '../plugin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
filebrowserWindowWidth : '100%',
filebrowserWindowHeight : '700'});</script>

Pemanggilan : <textarea name="isi" rows="30" cols="60" id="editor1" ></textarea>

Usahakan diakses melalui Localhost
Jika tidak berhasil silahkan cek Masing-masing Urlnya

DEMO



Artikel Terkait

0 Komentar