Ckeditor+CKFinder下载、安装、使用(文件上传)教程

版本:Ckeditor4、CKFinder3

 

语言:PHP

 

要求:确保你已经熟悉了Ckeditor4 下载、安装、使用教程

 

由于Ckeditor4已经兼容CKFinder3了,我们现在要做的就是,只需要将CKFinder4与CKEditor3集成在一起,具体的操作步骤如下:

 

一、下载CKFinder

打开官方下载链接:https://ckeditor.com/ckfinder/download/#php

注意:这里根据自己的编程语言以及要求来。例如,我下载的是ckfinder_php_3.5.1.2.zip。

CKFinder PHP

 

二、安装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、点击 “图片” - “浏览服务器”按钮。

点击“浏览服务器”就会出现CKFinder3文件管理器的默认界面。

 

2、就会弹出“ckfinder文件管理器”界面,如下图,也就是出来的是“filebrowserBrowseUrl”这个参数的地址。

注意:如果提示“因为安全原因,文件不可浏览。请联系系统管理员并检查 CKFinder 配置文件。”,请查看:因为安全原因,文件不可浏览。请联系系统管理员并检查 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
 );
付杰
  • ¥ 98.0元
  • 市场价:298.0元
  • ¥ 199.0元
  • 市场价:399.0元
  • ¥ 159.0元
  • 市场价:599.0元
  • ¥ 198.0元
  • 市场价:498.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: