Ckeditor3.6.3 ckfinder2.2.2超强整合完整版实践版 PHP

最新推荐文章于 2016-03-16 11:36:00 发布

jingquanliang

最新推荐文章于 2016-03-16 11:36:00 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/jingquanliang/article/details/97981869

版权

（绝对可以通过，这个坑爹的东西，整了两天才弄好的，通过查找资料以及看官方文档）

如果不通过联系我qq：540692237

1. 下载安装CKEditor:

http://ckeditor.com/

解压下载到的CKEditor放到网站的路径中即可

简单配置ckeditor，打开config.js，添加如下内容

2. 下载安装CKFinder:

http://ckfinder.com/download

解压下载到的CKEditor放到与CKEditor同一目录中即可

3. 在网页中使用CKEditor 和 CKFinder:

CKEditor 实际是替换一个 textarea 标签，所以把textarea放到一个form中，当提交到php服务器端，使用$_GET['xxx'] 或者$_POST['xxx'] 取得编辑好的数据。注意，因为 CKEditor 要替换textarea，所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的后面。

最简单的方法，直接使用下面的例子修改一下即可。可以在网页中看到 CKEditor 了，兴奋吧。

注意：路径一定要正确，否者无法显示。

4. 配置CKFinder进行上传图片，Flash等。

到这里，点击 "Image" 按钮，在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了，但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改ckfinder/config.php 里的三个地方:

一下我讲解的详细一点

假设我的项目的更目录是ck，如下图所示：

a. 创建保存上传文件的目录，如uploads，

其路径为C:\wamp5\www\ck\upload

[For Linux: 把其权限设置为php server可读写，最简单的是 chmod 777 uploads 这样php server才有权限往里面保存文件.]

b. 找到配置文件第32行，把function CheckAuthentication() { return false; }

修改成 function CheckAuthentication() { return true; } //这里可以改为自己想要的认证权限

//具体配置可以参照官方文档

c. 找到第63行，把 $baseUrl 的值改成保存上传文件存目录的URL，

如 $baseUrl = '/ck/uploads/';

d. 找到第82行，删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径，

如$baseDir ='C:/wamp5/www/ck/upload';

这是因为resolveUrl($baseUrl)函数在某种情况下不能正常工作。(这里我说的不是很详细，参照官方文档，有专门介绍baseurl和basepath的区别的)

至此，可以使用 CKEditor 和 CKFinder 上传文件了。

对上面这个小例子中服务器端的b.php代码：

可以看到，在点击submit按钮后，服务器端收到了CKEditor中的内容，并使用echo输出，生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库中。然后再读出在相应的页面显示出来。（这个时候会出现中文乱码，解决方法在下面）

ckeditor界面

昨天 15:41 上传

下载附件 (15.28 KB)
ckeditor

Ckfinder界面

昨天 15:41 上传

下载附件 (24.79 KB)
ckfinder

5．Ckfinder实现普通文件上传

其实上面的代码已经能够实现上传了只是找不到位置，应该这样操作即可成功。

点“插入/编辑超链接”，再点“上传”选项卡，选文件后点“上传到服务器上”

昨天 16:36 上传

下载附件 (10.02 KB)

就可以实现了，呵呵。是不非常简单呀。

ckfinder中实现文件上传后按当前时间改名

还有一个问题就是用ckfinder上传的文件不会重命名，对于中文文件就不能识别了。（不要害怕这个重命名，对你的使用完全没有影响，就好像他在内部的一个字符转换，只要照着做就可以了）
所有还要对上传的文件重命名，将文件名改为当前时间戳。
我还修改了一个地方：

在ckfinder/config.php中找到如下一段配置代码:

$config['FilesystemEncoding'] = 'UTF-8';

将UTF-8修改为GB2312，上传后文件名正确了，但在CKEditor中显示的链接出现乱码，因为CKEditor所在页面使用的字符集是UTF-8，未去细究如何解决这个问题，采用了文件重命名的方案去替代解决。

上传的有中文文件名的文件时会出现乱码并且编辑器无法显示上传文件。
CKfinder直接将文件以原文件名保存到服务器的，不知道官方有没提供更改保存文件名的配置方法（我没找到），所以直接更改PHP文件。
打开：ckfinder\core\connector\php\php5\CommandHandler\FileUpload.php

CKEditor 优化配置（以下的我没有具体使用过，有什么问题可以联系我）；

精简Ckeditor

在部署到Web服务器上时，下列文件夹和文件都可以删除：

/_samples ：示例文件夹；

/_source ：未压缩源程序；

/lang文件夹下除 zh-cn.js、en.js 以外的文件（也可以根据需要保留其他语言文件）；

根目录下的 changes.html(更新列表)，install.html(安装指向)，license.html(使用许可)；

/skins 目录下不需要的皮肤，一般用V2(简单，朴素) ，如果只保留V2则必须在config.js中指定皮肤。

提速：禁用拼写检查

ckeditor 的自动拼写检查功能(通过与svn.spellchecker.net网站交互完成)，使得 ckeditor 的装载非常的慢，有时显得录入反应相当的慢。拼写检查对于中文是多余了，所以可以把此功能屏蔽掉。官方网站的说法是 Scayt' (spell checker as yout type)

修改ckeditor_3.3.1\config.js ( 以此版本为例 )

Js代码
CKEDITOR.editorConfig = function( config )
{
      ......
      config.disableNativeSpellChecker = false ;
      config.scayt_autoStartup = false;
      ......
};

下面是官网对这两个参数的说明( docs.cksource.com )：
参数disableNativeSpellChecker 的说明：
Disables the built-in spell checker while typing natively available in the browser (currently Firefox and Safari only).
Even if word suggestions will not appear in the CKEditor context menu, this feature is useful to help quickly identifying misspelled words.
This setting is currently compatible with Firefox only due to limitations in other browsers.

参数scayt_autoStartup 的说明：
If enabled (true), turns on SCAYT automatically after loading the editor.

CKEditor 增加字体：

修改ckeditor\config.js
Java代码
CKEDITOR.editorConfig = function( config )
{
config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;'+ config.font_names ;
};其中，楷体/楷体_GB2312，表示在ckeditor中的字体显示名称为“楷体”，系统字体名称为“楷体_GB2312”。

CKEditor 添加自定义字体：

修改ckeditor\config.js
Config.js代码
config.contentsCss = 'fonts.css';
//  添加新的字体到 CKEditor 的字体列表
config.font_names = 'fontnametodisplay/yourfontname;' + config.font_names;

在fonts.css 中添加@font-face 属性:
Fonts.css代码
@font-face {
font-family: "yourfontname";
src: url( ../fonts/font.eot );
src: local("realfontname"), url("../fonts/font.TTF") format("truetype");
}

ckfinder改进：多用户，自动按年月划分文件夹

默认的ckfinder只是单用户，或者说，多个用户共用同一个图片目录。所有上传的image全部拥挤在一个文件夹。
现在想实现：
1. 不同用户有自己的独立的文件夹。
2. 同一个用户的文件能自动根据上传时间归类。
（我这里ckfinder是与ckeditor结合使用的。如果是ckfinder单独使用或者是与其它editor结合的情况，可能会作不同的修改。）
找到 /ckfinder/config.php 中的 $baseUrl。这个变量是ckfinder管理的最顶级目录。假设$baseUrl = '/userfiles/'，那么默认的目录结构是：
/userfiles/
　flashes/
　images/
如果想改成这个结构：
/userfiles/
　user1
　　flashes/
　　images/
　user2
　　flashes/
　　images/
只要为每个用户设定好各自的顶级目录就可以了： $baseUrl = '/userfiles/' . $user;
注意，如果 $user 的值是从$_SESSION中取得，需要在/ckfinder/config.php首行加上session_start();
到目前为止，第一个需求实现了。

第二个需求，只要两个步骤：
ONE.
找到 /ckfinder/core/connector/php/php5/CommandHandler/FileUpload.php文件。文件上传的主要逻辑都在这里了。如果你用的是php4，聪明的你会知道去哪里找这个文件的。
在这个文件里找到 $sServerDir = $this->_currentFolder->getServerPath();
将其改成：
$sServerDir = $this->_currentFolder->getServerPath();
if ($_GET['command'] == 'QuickUpload'){
　$sServerDir .= '/'. date('Y/m'); // 加上以年和月两层目录
}

if (!file_exists($sServerDir)){ // 目录若未出现则创建它
　CKFinder_Connector_Utils_FileSystem::createDirectoryRecursively($sServerDir);
}
TWO
找到 /ckfinder/core/connector/php/php5/CommandHandler/QuickUpload.php
找到其中的
$oRegistry->set("FileUpload_url", $this->_currentFolder->getUrl());
将其改为：
$oRegistry->set("FileUpload_url", $this->_currentFolder->getUrl().date('Y/m/'));
大功告成。

BTW，
无论怎样的文件保存规则和文件命名规则，都是$baseUrl ，$sServerDir ，和$sFileName这三个变量的配合。
如果是QuickUpload，即是从ckeditor的控件去upload files，还需留意两个要注册的变量：
$oRegistry->set("FileUpload_url", $value); 和
$oRegistry->set("FileUpload_fileName", $value);
FileUpload_url，FileUpload_fileName这两个变量是将刚上传的文件的URL返回到前端的ckeditor。