版本:Ckeditor4、CKFinder3
语言:PHP
要求:确保你已经熟悉了Ckeditor4 下载、安装、使用教程。
由于Ckeditor4已经兼容CKFinder3了,我们现在要做的就是,只需要将CKFinder4与CKEditor3集成在一起,具体的操作步骤如下:
一、下载CKFinder
打开官方下载链接:https://ckeditor.com/ckfinder/download/#php
注意:这里根据自己的编程语言以及要求来。例如,我下载的是ckfinder_php_3.5.1.2.zip。
二、安装CKFinder
主要是把CKFinder配置到我们的项目中去,搭建好,确保CKFinder可以正常使用。
1、解压
解压后可以看到有一个“ckfinder_php_3.5.1.2”文件夹。
2、进入“ckfinder_php_3.5.1.2”文件夹。
3、复制“ckfinder”文件夹到你的项目中去。
例如:我这是把“ckfinder”文件夹复制到“网站根目录/admin/”文件夹下面。
4、开始集成
注意:
1、filebrowserBrowseUrl、filebrowserUploadUrl,这里如果有不了解的朋友请看:ckeditor图片上传Url参数配置详解
2、filebrowserUploadUrl这里如果你不自定义,可以用ckfinder自带的文件上传处理功能。
3、自定义文件上传返回的数据格式是JSON,具体请看:ckeditor图片上传返回JSON数据格式 示例
<script>
// Replace the <textarea id="editor1"> with a CKEditor 4
// instance, using default configuration.
var editor = CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl: '/admin/ckfinder/ckfinder.html',
//ckfinder自带的文件上传处理路径 filebrowserUploadUrl: '/admin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserUploadUrl: "/admin.php?type=image&action=ckeditor",//我自定义的文件上传处理路径
filebrowserWindowWidth: '80%',
filebrowserWindowHeight: '70%'
} );
editor.on( 'change', function( evt ) {
CKEDITOR.instances.editor1.updateElement();
//console.log(evt.editor.getData());
//console.log( document.getElementById( 'editor1' ).value ); // The current editor data.
});
</script>
三、CKFinder使用(文件上传)教程
1、点击 “图片” - “浏览服务器”按钮。
2、就会弹出“ckfinder文件管理器”界面,如下图,也就是出来的是“filebrowserBrowseUrl”这个参数的地址。
注意:如果提示“因为安全原因,文件不可浏览。请联系系统管理员并检查 CKFinder 配置文件。”,请查看:因为安全原因,文件不可浏览。请联系系统管理员并检查 CKFinder 配置文件。解决方法
虽然说上面我们已经完成了“Ckeditor4+CKFinder3”的集成,文件上传功能也能正常使用了。但并不代表所有的东西都搞好了。请继续向下看:
四、CKFinder配置文件与选项说明
由于,CKFinder 3带有两个配置文件:
- config.php –本文中介绍的服务器端配置文件。
- config.js–可选的客户端配置文件。
每一个配置文件的选项参数都是挺多的,具体建议大家去看:
CKFinder3 PHP使用手册:https://ckeditor.com/docs/ckfinder/ckfinder3-php/
我这里只讲 config.php 最常用的几个配置与参数:
1、身份验证
只有“administrator”管理员这个用户组才可以使用“ckfinder文件管理器”。
session_start();
$config['authentication'] = function () {
if($_SESSION['CKFinder_UserRole'] === 'administrator'){
return true;
}else{
return false;
}
};
2、配置文件夹路径
我这里主要是配置我自定义文件上传后端处理后,图片存放的路径,重点看“baseUrl”。
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => '/uploads/',
// 'root' => '', // Can be used to explicitly set the CKFinder user files directory.
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8',
);
3、用户权限
CKFinder必须使用会话变量名称来检索当前用户的角色。不同用户权限不同,例如:普通用户只可读,没有上传、编辑权限。
以下配置代表的是:
当 $_SESSION['CKFinder_UserRole'] = 'administrator' 的时候,所有的权限都有。否则就只有查看的权限,不能上传图片,不能编辑图片,更加不允许删除了。
/*================================ Access Control =====================================*/
// https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_roleSessionVar
$config['roleSessionVar'] = 'CKFinder_UserRole';
// https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_accessControl
$config['accessControl'][] = array(
'role' => '*',
'resourceType' => 'Images',
'folder' => '/',
'FOLDER_VIEW' => true,
'FOLDER_CREATE' => false,
'FOLDER_RENAME' => false,
'FOLDER_DELETE' => false,
'FILE_VIEW' => true,
'FILE_CREATE' => false,
'FILE_RENAME' => false,
'FILE_DELETE' => false,
'IMAGE_RESIZE' => false,
'IMAGE_RESIZE_CUSTOM' => false
);
$config['accessControl'][] = Array(
'role' => 'administrator',
'resourceType' => '*',
'folder' => '/',
'FOLDER_VIEW' => true,
'FOLDER_CREATE' => true,
'FOLDER_RENAME' => true,
'FOLDER_DELETE' => true,
'FILE_VIEW' => true,
'FILE_CREATE' => true,
'FILE_RENAME' => true,
'FILE_DELETE' => true,
'IMAGE_RESIZE' => true,
'IMAGE_RESIZE_CUSTOM' => true
);