在线编辑器CKeditor，CKfinder

在线编辑器的分类：

常见的在线编辑器有很多，比较常用的有FCKeditor（在线编辑器——Ajax 浏览器

端服务器文件管理器）,CKeditor（在线编辑器与服务器端文件管理器的分离，）

其中CKeditor&CKfinder最为常用：

CKeditor:在线编辑器

CKfinder：服务器端文件管理器

CKeditor安装:

下载地址：http://www.ckeditor.com

CKeditor的安装很简单，只需要将文件解压，将CKeditor文件夹放到需要使用的项目位置即可。

CFeditor的目录结构：

使用CKeditor：

CKeditor：简单原理：我们知道，当前能够编辑html源码的表单元素只有textarea,因此在线编辑器的使用都是基于textarea。

怎么使用呢？

1.首先加载CKeditor文件夹中的ckeditor.js

2.界面中必须有一个textarea元素

3.将textarea替换成CKeditor编辑器

3.1最简单的方式：在textarea标签中增加一个class属性，值为CKeditor

3.2标准方式：使用CKeditor提供的类CKEDITOR，以及替换方法replace()。

<script>

　　CKEDITOR.replace('myck1');//参数为id

</script>

3.3高级方式，使用jquery进行texarea替换

3.3.1 先加载jquery.js

3.3.2 加载ckeditor对jquery提供的接口文件jquery.js。 在/ckeditor/adapters/jquery.js

3.3.3 使用jquery替换textarea元素

<script>

　　$('#myck1').ckeditor();//参数为id

</script>

注意：以上方式要求textarea元素必须有id或name属性

我们知道了怎么样使用，但有时，原始的样式不是我们期望的，这时就需要对ckeditor进行配置。

如何配置：

ckeditor提供了三种配置方式：

1.修改系统提供的配置文件config.js

例：config.配置项=值

config.width=500;

2.自定义配置文件，形式与系统配置文件config.js一致

2.1新建一个用户配置文件，格式和config.js完全一致

2.2修改配置选项同1

2.3在需要使用客户化的配置文件的ckeditor实例中加载客户定义的配置文件

注意：使用基础班的方式加载ckeditor无法使用客户化的配置文件

<script>

　　CKEDITOR.replace('myck1'，{customConfig:'config_user.js'});//参数为id,config_user.js是我们自定义的配置文件

</script>

优点：只有加载了客户化配置文件的ckeditor实例会受影响，其他的不收影响

3.in-page(页内)配置，在使用ckeditor的界面里进行配置

<script>

　　CKEDITOR.replace('myck1'，{

　　　　　　　　　　　　　　　　　　width:500,

　　　　　　　　　　　　　　　　　　height:200

　　　　　　　　　　　　　　　　});//参数为id,

</script>

CKfinder安装同ckeditor

注意：CKfinder下载时需注意选择你所使用的语言的版本

CKfinder目录结构：

使用ckfinder:

要在ckeditor的配置项中加载ckfinder的使用（加载几个静态页，用户文件的管理）

1.在客户化配置文件中进行配置：

2.因为ckfinder默认是不允许用户上传文件的，所以没有权限进行文件上传，需修改配置文件

找到config.php来开放权限

找到CheckAuthentication()方法进行修改

3.修改文件上传路径

在config.php中找到$baseUrl进行修改

4.修改文件上传的目录结构

目录结构不能是单一的就在某个文件类型的文件夹下，应该适当的根据文件上传的量来确定文件夹的结构

如：年/月/日

在config.php中找到$config['ResourceType'][]数组，修改其中的url和directory元素。

5.文件在上传的过程中，如果文件名字是中文或者特殊字符，系统是没有办法进行处理的，上传之后会出现乱码，但是ckfinder没有提供重命名的机制，因此我们需要

修改源码

实现文件重命名：

5.1首先找到源文件路径

新增一个获取随机名字的函数

在哪里调用函数？如何用？

我们知道文件管理器可以在浏览器对服务器进行文件的增删改查，所以我们需要控制用户权限。

控制用户权限：

在config.php中找到$config['AccessControl'][]数组，进行修改

ckeditor编辑内容提交

1.增加form表单，textarea必须要有name属性

2.php接收请求进行处理

我们需要注意的是，因为里面有各种标签，所以在保存时我们需要对内容进行转义操作

$_POST['myck1']=addslashes($_POST['myck1']);之后再存入数据库

这样内容的结构就被改变了，数据再读取之后会影响在浏览器端的显示，

所以必须将内容再转回去进行输出

stripslashes($info);

以上即是ckeditor和ckfinder的基本使用。