Tích hợp CKEditor + CKFinder vào CI (Nâng cao+CKFinder Chia quyền thư mục theo user)
Ngày 6 tháng 7 năm 2013
- Tích hợp CKEditor vào CI
- Tích hợp CKFinder vào CKEditor
- Tích hợp tuỳ biến CKFinder cho việc quản lý file khi không dùng editor
- Bảo mật cho CKFinder.
- Phân chia thư mục upload trong CKFinder theo từng user, mỗi user có thư mục upload riêng và không can thiệp dữ liệu của người khác
Về vấn đề bảo mật cho CKFinder, nếu website của bạn có nhúng CKFinder và nếu người ta biết điều đó (hiển nhiên) thì họ có thể truy xuất trực tiếp vào ckfinder và upload hay can thiệp lên hệ thống của bạn. Đó đúng là một thảm hoạ thật sự
Vấn đề chia thư mục upload, ví dụ như trong diễn đàn này, mỗi user được upload file resource của họ lên, nếu không phân chia thư mục cho từng user, mình có thể xoá tất cả file đã upload của người khác
Về vấn đề tích hợp CKEditor, mình muốn cung cấp cho các bạn một cách khác để tích hợp vào CI. Theo ý kiến cá nhân thì mình nghĩ cách này sẽ dễ dàng hơn một bài viết khác trong diễn đàn cũng đã hướng dẫn mọi người thực hiện.
Bây giờ bắt tay vào việc nào
Bước 1: Tải CKEditor về, lưu vào thư mục gốc của project. Hãy kiểm tra lại đường dẫn sao cho nó là: [CI root path]\ckeditor\ckeditor.php
Bước 2: Tải FCKFinder về, lưu vào thư mục application\third_party. Hãy kiểm tra lại đường dẫn sao cho nó là: application\third_party\ckfinder\ckfinder.php
Bước 3: Tạo thư mục media trong thư mục gốc của project. Thư mục này sẽ dùng để chứa tất cả file upload của user, bạn có thể thay đổi lại nếu muốn.
Bước 4: Nếu bạn có rewrite bằng htaccess, hãy cho phép rewrite tất cả các file kể cả file js và images.
Code file htaccess của mình như thế này:
Mã:
RewriteEngine On RewriteBase / #------------------------------------------------------------------- # Rewrite for none www #------------------------------------------------------------------- RewriteCond % off RewriteCond % !^localhost RewriteCond % !^www\.(.*)$ [NC] RewriteRule ^(.*)$ http://www.%/$1 [R=301,L] RewriteCond % on RewriteCond % !^localhost RewriteCond % !^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://www.%/$1 [R=301,L] #------------------------------------------------------------------- # End rewrite for none www #------------------------------------------------------------------- RewriteCond % !-f RewriteCond % !-d RewriteCond % !^/index.php #phải bỏ dòng dưới đây #RewriteCond % (/|\.php|\.html|\.htm|\.feed|\.js|\.css|\.pdf|\.raw|/[^.]*)$ [NC] RewriteCond $1 !^(index\.php|favicon\.ico|marketing|robots\.txt) RewriteRule (.*) index.php RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L] RewriteCond % mosConfig_[a-zA-Z_]{1,21}(=|\%3D) [OR] RewriteCond % base64_encode.*\(.*\) [OR] RewriteCond % (\<|%3C).*script.*(\>|%3E) [NC,OR] RewriteCond % GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR] RewriteCond % _REQUEST(=|\[|\%[0-9A-Z]{0,2}) RewriteRule ^(.*)$ index.php [F,L]
Lưu ý:
Từng dòng hướng dẫn mình đánh cụ thể trong code bằng dạng ghi chú luôn. Các bạn đọc code như đọc bài viết thông thường nhé
PHP Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
* Định nghĩa các thư mục/tên của từng loại resource
*/
define('NEWS_IMAGE_FOLDER_NAME', 'images');
define('NEWS_FLASH_FOLDER_NAME', 'flashs');
define('NEWS_FILES_FOLDER_NAME', 'files');
/**
* Thư mục gốc lưu trữ toàn bộ file upload của user
*/
define('ROOT_FILES_FOLDER', 'media/');
/**
* @property CI_Output $output
*/
class Ckfinder extends CI_Controller {
private $userid = 0;
private $rootCkPath;
public function __construct() {
parent::__construct();
/**
* Gán và xác định userID hoặc username ở đây
* bạn có thể lấy từ session/db hay bất kỳ đâu tuỳ hệ thống của bạn
* hoặc bạn có thể định mỗi user/nhóm user có một id riêng => cùng chung thư mục chứa file
*/
$this->userid = 123;
if (!defined('CKFINDER_ROOT_FOLDER'))
{
/*
* Đánh dấu xác thực cho phép CKFinder được phép chạy.
* Bạn có thể đưa code kiểm tra phân quyền upload vào đây để xác thực user hiện hành có được phép upload không
* Nếu user không được quyền upload, bạn define hằng số này = false, thì user có truy cập trực tiếp vào link
* CFKEditor nó cũng không hoạt động
*/
define('ALLOW_CKFINDER_FROM_CI', true);
/*
* Không đổi code phần này trừ khi bạn hiểu rõ bạn đang làm gì
*/
$isQuickUpload = $this->input->get('command') == 'QuickUpload';
$fileType = $this->input->get('type');
$userPath = ROOT_FILES_FOLDER . $this->userid . '/';
if ($isQuickUpload)
$userPath .= "$fileType/";
if ($isQuickUpload)
define ('IS_QUICK_UPLOAD', TRUE);
else
define ('IS_QUICK_UPLOAD', FALSE);
define ('CKFINDER_ROOT_FOLDER', $userPath);
}
$this->rootCkPath = FCPATH . APPPATH . 'third_party/ckfinder/';
}
/**
* Bắt và xử lý các request tới controller ckfinder.
* Do link tới resource của ckfinder rất đa dạng nên không thể viết từng action cho từng
* resource được mà chỉ viết action cho từng loại chung mà thôi
* do đó code thay vì viết trong từng action sẽ được xử lý chung qua 1 phương thức
* duy nhất là _remap
*
*/
public function _remap($method, $params = array()) {
$path = implode ("/", $params);
if (file_exists($this->rootCkPath . $method) && is_file($this->rootCkPath . $method))
$path = $method;
elseif (!file_exists($this->rootCkPath . $path))
$path = $method . DIRECTORY_SEPARATOR . $path;
if (file_exists($this->rootCkPath . $path))
{
$ext = pathinfo($path, PATHINFO_EXTENSION);
if ($ext == 'php' || $ext == 'php4' || $ext == 'php5')
{
$path = $this->rootCkPath . $path;
$_SERVER['SCRIPT_FILENAME'] = $path;
$dirname = dirname($path);
chdir($dirname);
require_once $path;
}
else//if ($ext == 'html')
{
$this->load->helper('file');
$m = get_mime_by_extension($path);
if (is_array($m))
$m = $m[0];
$content = file_get_contents (APPPATH . 'third_party/ckfinder/' . $path);
$this->output->set_header("Content-type: $m");
$this->output->append_output($content);
}
}
else
show_404();
}
}
Bước 6: Chỉnh sửa config.php của CKFinder
Bạn mở file application\third_party\ckfinder\config.php
Sửa code lại tương tự như sau:
PHP Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/*
* ### CKFinder : Configuration File - Basic Instructions
*
* In a generic usage case, the following tasks must be done to configure
* CKFinder:
* 1. Check the $baseUrl and $baseDir variables;
* 2. If available, paste your license key in the "LicenseKey" setting;
* 3. Create the CheckAuthentication() function that enables CKFinder for authenticated users;
*
* Other settings may be left with their default values, or used to control
* advanced features of CKFinder.
*/
/**
* This function must check the user session to be sure that he/she is
* authorized to upload and access files in the File Browser.
*
* @return boolean
*/
function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system. To be able to use session variables don't
// forget to add session_start() at the top of this file.
if (defined('ALLOW_CKFINDER_FROM_CI'))
return ALLOW_CKFINDER_FROM_CI;
return false;
}
// LicenseKey : Paste your license key here. If left blank, CKFinder will be
// fully functional, in demo mode.
$config['LicenseName'] = '';
$config['LicenseKey'] = '';
/*
Uncomment lines below to enable PHP error reporting and displaying PHP errors.
Do not do this on a production server. Might be helpful when debugging why CKFinder does not work as expected.
*/
// error_reporting(E_ALL);
// ini_set('display_errors', 1);
/*
To make it easy to configure CKFinder, the $baseUrl and $baseDir can be used.
Those are helper variables used later in this config file.
*/
/*
$baseUrl : the base path used to build the final URL for the resources handled
in CKFinder. If empty, the default value (/userfiles/) is used.
Examples:
$baseUrl = 'http://example.com/ckfinder/files/';
$baseUrl = '/userfiles/';
ATTENTION: The trailing slash is required.
*/
$baseUrl = '/' . CKFINDER_ROOT_FOLDER;
/*
$baseDir : the path to the local directory (in the server) which points to the
above $baseUrl URL. This is the path used by CKFinder to handle the files in
the server. Full write permissions must be granted to this directory.
Examples:
// You may point it to a directory directly:
$baseDir = '/home/login/public_html/ckfinder/files/';
$baseDir = 'C:/SiteDir/CKFinder/userfiles/';
// Or you may let CKFinder discover the path, based on $baseUrl.
// WARNING: resolveUrl() *will not work* if $baseUrl does not start with a slash ("/"),
// for example if $baseDir is set to http://example.com/ckfinder/files/
$baseDir = resolveUrl($baseUrl);
ATTENTION: The trailing slash is required.
*/
$baseDir = FCPATH . CKFINDER_ROOT_FOLDER;//resolveUrl($baseUrl);
/*
* ### Advanced Settings
*/
/*
Thumbnails : thumbnails settings. All thumbnails will end up in the same
directory, no matter the resource type.
*/
$config['Thumbnails'] = Array(
'url' => $baseUrl . '_thumbs',
'directory' => $baseDir . '_thumbs',
'enabled' => true,
'directAccess' => false,
'maxWidth' => 100,
'maxHeight' => 100,
'bmpSupported' => false,
'quality' => 80);
/*
Set the maximum size of uploaded images. If an uploaded image is larger, it
gets scaled down proportionally. Set to 0 to disable this feature.
*/
$config['Images'] = Array(
'maxWidth' => 1600,
'maxHeight' => 1200,
'quality' => 80);
/*
RoleSessionVar : the session variable name that CKFinder must use to retrieve
the "role" of the current user. The "role", can be used in the "AccessControl"
settings (bellow in this page).
To be able to use this feature, you must initialize the session data by
uncommenting the following "session_start()" call.
*/
$config['RoleSessionVar'] = 'CKFinder_UserRole';
//session_start();
/*
AccessControl : used to restrict access or features to specific folders.
Many "AccessControl" entries can be added. All attributes are optional.
Subfolders inherit their default settings from their parents' definitions.
- The "role" attribute accepts the special '*' value, which means
"everybody".
- The "resourceType" attribute accepts the special value '*', which
means "all resource types".
*/
$config['AccessControl'][] = Array(
'role' => '*',
'resourceType' => '*',
'folder' => '/',
'folderView' => true,
'folderCreate' => true,
'folderRename' => true,
'folderDelete' => true,
'fileView' => true,
'fileUpload' => true,
'fileRename' => true,
'fileDelete' => true);
/*
For example, if you want to restrict the upload, rename or delete of files in
the "Logos" folder of the resource type "Images", you may uncomment the
following definition, leaving the above one:
$config['AccessControl'][] = Array(
'role' => '*',
'resourceType' => 'Images',
'folder' => '/Logos',
'folderView' => true,
'folderCreate' => true,
'folderRename' => true,
'folderDelete' => true,
'fileView' => true,
'fileUpload' => false,
'fileRename' => false,
'fileDelete' => false);
*/
/*
ResourceType : defines the "resource types" handled in CKFinder. A resource
type is nothing more than a way to group files under different paths, each one
having different configuration settings.
Each resource type name must be unique.
When loading CKFinder, the "type" querystring parameter can be used to display
a specific type only. If "type" is omitted in the URL, the
"DefaultResourceTypes" settings is used (may contain the resource type names
separated by a comma). If left empty, all types are loaded.
maxSize is defined in bytes, but shorthand notation may be also used.
Available options are: G, M, K (case insensitive).
1M equals 1048576 bytes (one Megabyte), 1K equals 1024 bytes (one Kilobyte), 1G equals one Gigabyte.
Example: 'maxSize' => "8M",
*/
$config['DefaultResourceTypes'] = '';
$config['ResourceType'][] = Array(
'name' => ucfirst(NEWS_FILES_FOLDER_NAME), // Single quotes not allowed
'url' => $baseUrl . (IS_QUICK_UPLOAD?'':NEWS_FILES_FOLDER_NAME),
'directory' => $baseDir . (IS_QUICK_UPLOAD?'':NEWS_FILES_FOLDER_NAME),
'maxSize' => 0,
'allowedExtensions' => '7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip',
'deniedExtensions' => '');
$config['ResourceType'][] = Array(
'name' => ucfirst(NEWS_IMAGE_FOLDER_NAME),
'url' => $baseUrl . (IS_QUICK_UPLOAD?'':NEWS_IMAGE_FOLDER_NAME),
'directory' => $baseDir . (IS_QUICK_UPLOAD?'':NEWS_IMAGE_FOLDER_NAME),
'maxSize' => 0,
'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
'deniedExtensions' => '');
$config['ResourceType'][] = Array(
'name' => ucfirst(NEWS_FLASH_FOLDER_NAME),
'url' => $baseUrl . (IS_QUICK_UPLOAD?'':NEWS_FLASH_FOLDER_NAME),
'directory' => $baseDir . (IS_QUICK_UPLOAD?'':NEWS_FLASH_FOLDER_NAME),
'maxSize' => 0,
'allowedExtensions' => 'swf,flv',
'deniedExtensions' => '');
/*
Due to security issues with Apache modules, it is recommended to leave the
following setting enabled.
How does it work? Suppose the following:
- If "php" is on the denied extensions list, a file named foo.php cannot be
uploaded.
- If "rar" (or any other) extension is allowed, one can upload a file named
foo.rar.
- The file foo.php.rar has "rar" extension so, in theory, it can be also
uploaded.
In some conditions Apache can treat the foo.php.rar file just like any PHP
script and execute it.
If CheckDoubleExtension is enabled, each part of the file name after a dot is
checked, not only the last part. In this way, uploading foo.php.rar would be
denied, because "php" is on the denied extensions list.
*/
$config['CheckDoubleExtension'] = true;
/*
Increases the security on an IIS web server.
If enabled, CKFinder will disallow creating folders and uploading files whose names contain characters
that are not safe under an IIS web server.
*/
$config['DisallowUnsafeCharacters'] = false;
/*
If you have iconv enabled (visit http://php.net/iconv for more information),
you can use this directive to specify the encoding of file names in your
system. Acceptable values can be found at:
http://www.gnu.org/software/libiconv/
Examples:
$config['FilesystemEncoding'] = 'CP1250';
$config['FilesystemEncoding'] = 'ISO-8859-2';
*/
$config['FilesystemEncoding'] = 'UTF-8';
/*
Perform additional checks for image files
if set to true, validate image size
*/
$config['SecureImageUploads'] = true;
/*
Indicates that the file size (maxSize) for images must be checked only
after scaling them. Otherwise, it is checked right after uploading.
*/
$config['CheckSizeAfterScaling'] = true;
/*
For security, HTML is allowed in the first Kb of data for files having the
following extensions only.
*/
$config['HtmlExtensions'] = array('html', 'htm', 'xml', 'js');
/*
Folders to not display in CKFinder, no matter their location.
No paths are accepted, only the folder name.
The * and ? wildcards are accepted.
*/
$config['HideFolders'] = Array(".svn", "CVS");
/*
Files to not display in CKFinder, no matter their location.
No paths are accepted, only the file name, including extension.
The * and ? wildcards are accepted.
*/
$config['HideFiles'] = Array(".*");
/*
After file is uploaded, sometimes it is required to change its permissions
so that it was possible to access it at the later time.
If possible, it is recommended to set more restrictive permissions, like 0755.
Set to 0 to disable this feature.
Note: not needed on Windows-based servers.
*/
$config['ChmodFiles'] = 0777 ;
/*
See comments above.
Used when creating folders that does not exist.
*/
$config['ChmodFolders'] = 0755 ;
/*
Force ASCII names for files and folders.
If enabled, characters with diactric marks, like å, ä, ö, ć, č, đ, š
will be automatically converted to ASCII letters.
*/
$config['ForceAscii'] = false;
/*
Send files using X-Sendfile module
Mod X-Sendfile (or similar) is avalible on Apache2, Nginx, Cherokee, Lighttpd
Enabling X-Sendfile option can potentially cause security issue.
- server path to the file may be send to the browser with X-Sendfile header
- if server is not configured properly files will be send with 0 length
For more complex configuration options visit our Developer's Guide
http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP
*/
$config['XSendfile'] = false;
$config['plugin_imageresize']['smallThumb'] = '90x90';
$config['plugin_imageresize']['mediumThumb'] = '120x120';
$config['plugin_imageresize']['largeThumb'] = '180x180';
$GLOBALS['config'] = $config;
include_once "plugins/imageresize/plugin.php";
include_once "plugins/fileeditor/plugin.php";
include_once "plugins/zip/plugin.php";
Nếu muốn tuỳ chỉnh các thông số cấu hình thì thay đổi theo yêu cầu của bạn. Tuy nhiên lưu ý các hằng số đường dẫn tốt nhất không nên thay đổi.
Bước 7: Ngắm nhìn thành quả của CKFinder.
Bạn vào link http://localhost/ci213/index.php/ckfinder/ckfinder.html
ci213 là tên của project của bạn
nếu bạn có rewrite bỏ index.php thì không cần thêm index.php trong link
Nếu mọi việc thuận lợi, CKFinder sẽ hiện lên và bạn có thể thao tác bình thường.
Bước 8: Tạo editor_helper để tích hợp CKEditor. Code của helper như sau:
PHP Code:
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
function loadEditer() {
$obj = & get_instance();
if (isset($obj->ckeditor))
return;
if (!class_exists('CKEditor')) {
require_once FCPATH . 'ckeditor/ckeditor.php';
}
if (!class_exists('CKFinder')) {
require_once FCPATH . APPPATH . 'third_party/ckfinder/ckfinder.php';
}
$obj->ckeditor = new CKeditor(base_url() . "ckeditor/");
$obj->ckeditor->returnOutput = true;
$obj->ckfinder = new CKFinder(site_url("/ckfinder/"));
$obj->ckfinder->SetupCKEditor($obj->ckeditor, site_url("/ckfinder/"));
}
function editerGetDefaultConfig() {
$config = array(
"fullPage" => false,
"extraPlugins" => 'docprops,autogrow,tableresize',
"enterMode" => "CKEDITOR.ENTER_BR",
"shiftEnterMode" => "CKEDITOR.ENTER_P",
"autoGrow_maxHeight" => 800,
"skin" => 'kama',
"language" => 'vi',
"jqueryOverrideVal" => true,
//"toolbar"=>$toolbar,
"removePlugins" => 'resize'
);
return $config;
}
function editerGetEnConfig() {
$config = array(
"fullPage" => false,
"extraPlugins" => 'docprops,autogrow,tableresize',
"enterMode" => "CKEDITOR.ENTER_BR",
"shiftEnterMode" => "CKEDITOR.ENTER_P",
"autoGrow_maxHeight" => 800,
"skin" => 'kama',
"language" => 'en',
"jqueryOverrideVal" => true,
//"toolbar"=>$toolbar,
"removePlugins" => 'resize'
);
return $config;
}
loadEditer();
Tiếp theo là các bước tích hợp vào CI
Bước 8: Tạo controller welcome code như sau:
PHP Code:
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class Welcome extends CI_Controller
{
public function index()
{
$data = array();
$this->load->helper(array('url', 'editor_helper'));
$data['ckediter'] = $this->ckeditor->replace("demo", editerGetEnConfig());
$data['ckediter2'] = $this->ckeditor->replace("demo2", editerGetDefaultConfig());
$this->load->view('welcome_message', $data);
}
}
Bước 9: Code view welcome_message:
PHP Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
</head>
<body>
<div id="container">
<div id="body">
<input type="button" value="Duyệt hình" onclick="BrowseServer()"/> <input type="text" id="image" style="width: 80%"/>
<textarea id="demo" name="demo"></textarea>
<textarea id="demo2" name="demo2"></textarea>
</div>
<p class="footer">Page rendered in <strong></strong> seconds</p>
</div>
<?php echo $ckediter; //bắt buộc phải xuất biến này trước các editor khác do trong controller khởi tạo nó đầu tiên ?>
<?php echo $ckediter2 ?>
<script type="text/javascript">
function BrowseServer()
{
var finder = new CKFinder();
finder.BasePath = '<?php echo site_url() ?>/ckfinder/';
finder.SelectFunction = SetFileField;
//finder.SelectFunctionData = 'images' ;
finder.Popup();
}
function SetFileField(fileUrl, data)
{
//alert('Bạn đã chọn file: ' + fileUrl);
document.getElementById("image").setAttribute("value", fileUrl);
}
</script>
<script type="text/javascript" src="<?php echo site_url() ?>/ckfinder/ckfinder_v1.js"></script>
</body>
</html>
Bước 10: Vào link http://localhost/ci213/index.php/welcome để tận hưởng thành quả.
Click nút "Duyệt hình" bạn sẽ thấy CKFinder chạy độc lập (không tích hợp vào CKEditor).
Download toàn bộ source ví dụ ở đây:
http://www.chuongduong.net/link/17034
Đang tải dữ liệu...