ThinkPHP中FCKeditor编辑器的使用

前段时间一直为TP寻找好用的在线编辑器而苦恼，经过多次尝试与修改后，终于成功地将编辑器集成到Thinkphp里面。而且可以用直接上传和ajax两种方式处理内容。为了给一些还没能成功地集成fckeditor的同侪们一些启发与帮助，兹将我的经验与体会描述如下：
应用目的：将FCKeditor编辑器集成到Thinkphp中，使用户能够在线像编辑Word一样处理即将发表的文字与图像。
应用软件与环境：apache服务器2.0以上版本，PHP版本5.0以上，mysql5.0以上；Thinkphp版本1.5或以上，Fckeditor版本2.x。
应用步骤：
1、下载FCKeditor2.x版本，将解压后的文件夹FCKeditor复制到ThinkPHP文件夹下的Vendor目录下，以便符合THinkPHP的第三方类库引入规则。
2、修改参数：
首先，用EditPlus等软件打开FCKeditor目录下的fckeditor_php5.php文件，找到第130行。出现内容如下：

public function __construct( $instanceName )

{$this->InstanceName
= $instanceName ;
$this->BasePath= ‘   ‘ ;

$this->Width
= ‘900′;

$this->Height
= ‘400′;

$this->ToolbarSet
= ‘Default’ ;

$this->Value
=   ‘  ’;
$this->Config
= array() ;

}
public function __construct( $instanceName )

{

$this->InstanceName
= $instanceName ;

$this->BasePath
= ‘/bm/ThinkPHP/Vendor/FCKeditor/’ ;

$this->Width
= ‘900′;

$this->Height
= ‘400′;

$this->ToolbarSet
= ‘Default’ ;

$this->Value
= ”;
其中，最关键的就是将Basepath设置好。里面填写的就是fckeditor_php5.php文件相对于网站文档根目录（document root）的路径。其实这就是用以表征FCKeditor编辑器相对根目录的路径。比如服务器的文档根目录最下级是htdocs/或www/，项目名为project,project项目文件夹下有Thinkphp系统文件包与项目文件包myapp。而且服务器没有对该项目设置虚拟主机的话，此时的文档根目录仍是www/或htdocs/,那么应该是$this->BasePath=’/project/ThinPHP/Vendor/FCKeditor/’;
若是设置了虚拟主机，即将project变为虚拟的文档根目录，通过某一域名能够直接访问网站项目的话，那么此时，
$this->BasePath=’/ThinPHP/Vendor/FCKeditor/’;
其他的参数如宽度与高度可以填或不填，若填下的话就是编辑器的默认高与宽。InstanceName是编辑器所在标签的id与name，此时不用理会。其他参数也不用理会。
其次，在FCKeditor\editor\filemanager\connectors\php\下面找到config.php文件，打开它，找到30与34行。需要改写的参数如下：$Config['Enabled'] = true ;
$Config['UserFilesPath'] = ‘    ’ ;
其中，第一个参数应该设为true.默认是true.第二个参数填写的是上传文件的路径，比如要显示的图片等。我们在project目录下建立一个uploads文件夹，那么$Config['UserFilesPath'] = ‘ /project/uploads/   ‘;路径规则与上一个basepath一样。要是project是虚拟文档根目录的话，那么$Config['UserFilesPath'] = ‘ /uploads/   ‘;
3、应用程序：
比如在myapp项目中Lib目录下IndexAction.class.php控制器类中的index方法中，当访问该程序时，输出的模板网页里有form表单，要求用户输入一篇文章，那么就可以用到编辑器.代码示例如下，只显示与fckeditor有关的代码，其他代码会略。
首先是服务器程序：
public function index()
{……//其他代码
vendor(”FCKeditor.fckeditor”);//包含FCKeditor类库，TP引入第三方类库的系统方法，其路径是相对于vendor目录来说的。
$editor= new FCKeditor();   //实例化FCKeditor对象
$editor->Width=’980′;//设置编辑器实际需要的宽度。此项省略的话，会使用默认的宽度。
$editor->Height=’400′;//设置编辑器实际需要的高度。此项省略的话，会使用默认的高度。
$this->Value=”;//设置编辑器初始值。也可以是修改数据时的设定值。可以置空。
$editor->InstanceName=’comment’;//设置编辑器所在表单内输入标签的id与name，即<input>标签的id与name。此处假            //设为comment.此处不可省，也要保持唯一性。表单上传到服务器处理程序后，即可通过$_POST['comment']来读取。
$html=$editor->Createhtml();//创建在线编辑器html代码字符串,并赋值给字符串变量$html.
$this->assign(’html’,$html);//将$html的值赋给模板变量$html.在模板里通过{$html}可以直接引用。
…….//其他代码，包括输出模板。
}
其次是对应的html模板即index 文件。只需要在需要的地方插入编辑器即可，其他代码与一般的<form>写法一样。
…….<!–其他html代码     –>
<div>
<form id=”commentform” name=”commentform” action=”">//action里填写表单处理程序，如’__APP__/Index/check’。  指的是IndexAction类下的check()方法来处理提交的表单数据。
<table style=”width:100%;”>
<tr>
<td style=”text-align:left;”>添加新评论：
</td>
</tr>
……//其他表单填写项
<tr>
<td > {$html}</td>
</tr>
<tr>
<td><input type=”submit” value=”提交评论” >
</td>
</tr>
</table>
</form>
</div>
到这里， 已经可以用了。在表单处理程序里像通常处理表单元素那样就行。但是，有的时候项目移植后，上传的图片等链接路径会被错误编译，以致不能正确显示图片等东西。通常是双引号解析错误，我还没有解决。要想不出错的话，可以采取ajax的方式处理表单数据。不过在进行ajax处理之前，要先用一段js代码将编辑器中的值赋给表单中name是instacename的值的表单元素。比如，本项示例中要用ajax对表单进行处理的话，index模板文件中必须在表单处理前运行的一段js代码为：
…….//其他js代码
var  editor=FCKeditorAPI.GetInstance(’comment’);//comment是设置的instanceName值.
document.commentform.comment.value=editor.EditorDocument.body.innerHTML;//将编辑器中内容处理后的源代码                                                                                                               //赋值给commentform表单的comment 属性元素值。
……//其他js代码
注：个人认为xajax比较不错，只需要将主要精力花在后台程序上。我也是用xajax进行数据处理的。前台代码很简单。（来自于我的博客：http://bm.heeyoon.com/groupblog/?p=13）

不建议PHP调用Fck

内置有这个调用的。

把FCK文件放入PUBLIC/JS/FCKeditor/目录下
在根目录下

修改数据

嗯,好好参考一下

下载收藏研究研究啊！

可以研究下discuz或者uchome的编辑器，很容易就可以抽离出来

谢谢分享

正愁这个呢

路过观摩

谢谢分享

好贴!  顶一个!

非常不错

不错，支持支持

我也正愁这个呢

为什么配置完以后出现打不开网页的情况啊？

为什么不用html直接调用fckeditor呢？

支持楼主，打个记号

太感谢你了，很详细。

我也愁着

谢谢,非常有用

谢谢楼主分享找了半天找到！

听起来貌似不错的

project,project项目文件夹下有Thinkphp系统文件包与项目文件包myapp。而且服务器没有对该项目设置虚拟主机的话，此时的文档根目录仍是www/或htdocs/,那么应该是$this->BasePath=’/project/ThinPHP/Vendor/FCKeditor/’;
若是设置了虚拟主机，即将project变为虚拟的文档根目录，通过某一域名能够直接访问网
这个$this->BasePath=’/project/ThinPHP/Vendor/FCKeditor/’;   
红字应该是thinkphp  ，原文少个K，希望能改过来下。就因为少个K没注意，一直调用FCKeditor不成功

刚把这个弄出来，还飞了点功夫。

呵呵，看看，有更好的编辑器吗？

挺好的，我一直用html调用，谢谢了。

对的！前几天对拷了个dede用的ＦＣＫ，发现那里面引用了他自己cms的图像处理页面，今天晚上回去再看一下discuz的！

学习了，很感谢啊