一, 使用前的准备。
使用前请确认你已经建立好了一个Thinkphp网站项目。
1,Keditor.class.php和JSON.class.php 是编辑器扩展类文件,将他们复制到你的网站项目的ThinkPHP\Lib\ORG\Net 文件夹下。
2,editor文件夹是kindeditor的核心包。将其复制到你项目的Public文件夹下(和入口文件同级的那个Public),并在Public下再建立一个Upload文件夹,用于存放使用编辑器上传的图片。
3,KeditorAction.class.php是编辑器的上传图片功能和浏览远程图片功能,将其复制到你项目的lib\Action 文件夹下。
二, 对象的调用
在控制器方法中调用对象:
import("ORG.Net.Keditor"); $ke=new Keditor(); $ke->id="content";//指定textarea的id $keshow=$ke->show();//生成js代码 $this->assign("keshow",$keshow); $this->display();
<html> <head>{$keshow}</head><!--输出js,建议放在head--> <body> <form id="form1" name="form1" method="post" action=""> <textarea name="content" id="content" cols="70" rows="20"><!-文本域,id为content--> </textarea> <input name="img" id="img" type="hidden" value="" /><!--隐藏域存储编辑器上传的图片地址,id为img--> </form> </body> </html>
三, 对象的属性
我把属性分为两种,一种是kindeditor自带属性,一种是扩展新增属性。如果你以前就使用过kindeditor,你应该知道kindeditor自身有id、items、width、height、afterCreate等等30个属性。这些属性现在可以用过php直接定义,比如定义id:$ke->id=”content”,定义宽度:$ke->width=”700px”; 我先说对象新增属性。
对象的新增属性:
1,jspath:定义kindeditor的核心js文件,默认值为/Public/editor/kindeditor.js ,如果你的editor文件夹没有放在Publib下需要指定此属性,如$ke->jspath=”/kind/ kindeditor.js”;
2,form:指定提交的表单(from)的id,默认为form1,这个属性是结合ctrl+enter提交功能使用的,比如有个你的编辑器放在表单id为 “formid”内,要实现ctrl+enter提交formid表单,需要定义$ke->form=”formid” 。 ctrl+enter提交功能还要设置其他属性,后面再讲解。
3,imgid:指定存放图片地址的隐藏域id,默认为img。编辑器每上传一张图片,会把图片地址存储到该隐藏域。在向数据库添加数据时,可以把此隐藏域中的数据也保存到数据库字段中,在删除数据时候,先读取数据库存放的图片地址,进行删除。删除过程只要调用对象的delimg方法即可,此方法后面详解。这样就达到删除内容同时删除图片的目的。
自带属性:
1,items:配置编辑器的工具栏,定义方法如
$ke->items=”[‘source‘, ‘|‘, ‘fullscreen‘, ‘undo‘, ‘redo‘, ‘print‘, ‘cut‘, ‘copy‘, ‘paste‘]”;
我增加了little关键词,可以快速定义一个精简模型的编辑器,使用方法$ke->items=”little”;
2,afterCreate:设置编辑器创建后执行的回调函数,定义方法如
$ke->afterCreate=”function(id){
alert(‘成功创建’+id)
}”;
我增加了ctrlenter关键词,可以快速定义ctrl+enter提交表单,使用方法:
$ke->afterCreate=”ctrlenter”;
同时需要定义$ke->form=”formname”, formname换为你编辑器所在的表单id。
3,resizeMode:2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动。定义方法如:$ke->resizeMode=1; 注意,数字类型的属性值不要放在引号中,如$ke->resizeMode=”1”;这么定义是错误的。
4,allowFileManager:true或false,true时显示浏览服务器图片功能(点击上传图片按钮可以看到此功能),定义方法如
$ke-> allowFileManager=ture;
注意,属性值为布尔值时不要放在引号中。
5,imageUploadJson指定上传图片的服务器端程序,默认值为 /index.php/Keditor/upload
6,fileManagerJson:指定浏览远程图片的服务器端程序,
默认值为/index.php/Keditor/filemanager
注:之前你复制过的KeditorAction.class.php就是供上传图片和浏览远程图片使用的。文件内的upload方法定义了上传图片处理过程,文件内的filemanager方法定义了浏览图片的处理过程。你可以在这两个方法上加入判断权限的代码,实现只有管理员才能上传图片或浏览图片。你也可以不使用默认的KeditorAction.class.php,自己定义上传处理过程和浏览图片处理过程,则是你需要重新定义imageUploadJson属性值和fileManagerJson属性值。 自定义处理过程,后面详解。
还有其他自带属性,我就不一一列举了。大家可以查看kindeditor官方文档
http://www.kindsoft.net/doc.php?cmd=config
注意,数字类型或布尔类型的属性值,不要放在引号内。其他属性值放在引号中,属性值的格式和kindeditor自身格式一样。
四 对象的方法。
1,upload,上传图片。此方法在编辑器上传图片处理过程中使用,使用方法:
import("ORG.Net.Keditor"); Keditor::upload('./Public/Upload/','/Public/Upload/',array('gif','jpg','jpeg','png','bmp'),1000000);
import("ORG.Net.Keditor"); Keditor::filemanager("./Public/Upload/","/Public/Upload/",array('gif','jpg','jpeg', 'png', 'bmp'));
import("ORG.Net.Keditor"); Keditor::delimg($imgfield); //$imgfield 一般是你数据库存放图片地址的字段。
import("ORG.Net.Keditor"); $ke=new Keditor(); $ke->show(“{ id : ”content”, width: ‘700px’; height : ”300px”; imgid : ”img” }”);
Thinkphp编辑器扩展类kindeditor使用方法,布布扣,bubuko.com
原文:http://blog.csdn.net/luxiuwen/article/details/37601567