CKEditor 4 và CFinder 3 – PHP

Hướng dẫn cài đặt CKEditor 4 và Cfinder 3

  • Tải CKEditor, CKFinder ở 2 link sau (3.4.2)

  • Giải nén và chép ckeditor, cfinfer vào thư mục gốc của website (web root folder)
  • Cấu hình cfinder tích hợp với ckeditor

Thay đổi $config[‘authentication’] file config.php nằm trong thư mục cfinder như sau

$config[‘authentication’] = function () {
return true; // FALSE -> TRUE

  • Add CKEditor vào trang web

src=”ckfinder/ckfinder.js” type=”text/javascript”>

Thành phần TEXT EDITOR //TextArea
<textarea name=”editor1″ id=”editor1″ rows=”10″ cols=”80″>
This is my textarea to be replaced with CKEditor.
//Script for CKEditor

// Replace the with a CKEditor
// instance, using default configuration.
var editor = 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’
CKFinder.setupCKEditor( editor, {
skin: ‘jquery-mobile’,
swatch: ‘b’,
onInit: function( finder ) {
finder.on( ‘files:choose’, function( evt ) {
var file =;
console.log( ‘Selected: ‘ + file.get( ‘name’ ) );
} );
} );



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s