ThinkPHP中FCKeditor编辑器的使用方法
程序员文章站
2022-06-19 13:39:55
而且可以用直接上传和ajax两种方式处理内容。为了给一些还没能成功地集成fckeditor的同侪们一些启发与帮助， 兹将我的经验与体会描述如下：应用目的：将fckedito...
而且可以用直接上传和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行。出现内容如下：
其中，最关键的就是将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有关的代码，其他代码会略。
首先是服务器程序：
其次是对应的html模板即index 文件。只需要在需要的地方插入编辑器即可，其他代码与一般的<form>写法一样。
…….<!–其他html代码 –>
<div>
<form id=”commentform” name=”commentform” action=”">//action里填写表单处理程序，如'__app__/index/check'。
指的是indexaction类下的check()方法来处理提交的表单数据。
到这里， 已经可以用了。在表单处理程序里像通常处理表单元素那样就行。但是，有的时候项目移植后，上传的图片等链接路径会被错误编译，
以致不能正确显示图片等东西。通常是双引号解析错误，我还没有解决。要想不出错的话，可以采取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进行数据处理的。前台代码很简单。
兹将我的经验与体会描述如下：应用目的：将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行。出现内容如下：
其中，最关键的就是将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有关的代码，其他代码会略。
首先是服务器程序：
其次是对应的html模板即index 文件。只需要在需要的地方插入编辑器即可，其他代码与一般的<form>写法一样。
…….<!–其他html代码 –>
<div>
<form id=”commentform” name=”commentform” action=”">//action里填写表单处理程序，如'__app__/index/check'。
指的是indexaction类下的check()方法来处理提交的表单数据。
到这里， 已经可以用了。在表单处理程序里像通常处理表单元素那样就行。但是，有的时候项目移植后，上传的图片等链接路径会被错误编译，
以致不能正确显示图片等东西。通常是双引号解析错误，我还没有解决。要想不出错的话，可以采取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进行数据处理的。前台代码很简单。