ThinkPHP中FCKeditor编辑器的使用方法(thinkphp用什么编辑器)真没想到

随心笔谈2年前发布 编辑
166 0
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买


而且可以用直接上传和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,即标签的id与name。此处假

//设为comment.此处不可省,也要保持唯一性。表单上传到服务器处理程序后,即可通过$_POST[‘comment’]来读取。

$html=$editor->Createhtml();//创建在线编辑器html代码字符串,并赋值给字符串变量$html.

$this->assign(‘html’,$html);//将$html的值赋给模板变量$html.在模板里通过{$html}可以直接引用。

……https://www.jb51.net/article//其他代码,包括输出模板。

}

其次是对应的html模板即index 文件。只需要在需要的地方插入编辑器即可,其他代码与一般的

写法一样。

…….

//action里填写表单处理程序,如’__APP__/Index/check’。

指的是IndexAction类下的check()方法来处理提交的表单数据。

复制代码 代码如下:

添加新评论:

……//其他表单填写项

{$html}

到这里, 已经可以用了。在表单处理程序里像通常处理表单元素那样就行。但是,有的时候项目移植后,上传的图片等链接路径会被错误编译,

以致不能正确显示图片等东西。通常是双引号解析错误,我还没有解决。要想不出错的话,可以采取ajax的方式处理表单数据。

不过在进行ajax处理之前,要先用一段js代码将编辑器中的值赋给表单中name是instacename的值的表单元素。比如,

本项示例中要用ajax对表单进行处理的话,index模板文件中必须在表单处理前运行的一段js代码为:

……https://www.jb51.net/article//其他js代码

var editor=FCKeditorAPI.GetInstance(‘comment’);//comment是设置的instanceName值.

document.commentform.comment.value=editor.EditorDocument.body.innerHTML;//将编辑器中内容处理后的源代码

//赋值给commentform表单的comment 属性元素值。

……//其他js代码

注:个人认为xajax比较不错,只需要将主要精力花在后台程序上。我也是用xajax进行数据处理的。前台代码很简单。

您可能感兴趣的文章:thinkphp3.2嵌入百度编辑器ueditor的实例代码ThinkPHP中使用Ueditor富文本编辑器ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析利用Electron简单撸一个Markdown编辑器的方法利用Vue实现一个markdown编辑器实例代码vue中利用simplemde实现markdown编辑器(增加图片上传功能)SpringBoot使用Editor.md构建Markdown富文本编辑器示例Thinkphp5框架中引入Markdown编辑器操作示例

© 版权声明

相关文章