这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢CKEditor的界面而选择了它。虽然有跟CKEditor配合良好的CKFinder,不过这个东东的功能太复杂,简单看了下CKEdtior的文档,发现这个功能还是可以自己实现而不用借助CKFinder的。
下面代码虽然基于Yii Framework的,但是用其他框架或者语言思路却是完全一样的,有需要的童鞋可以参考一下。
首先要让CkEditor出现图片上传的功能,需要配置编辑器的filebrowserImageUploadUrl属性:
CKEDITOR.replace( editor1 , filebrowserUploadUrl : /uploader/upload.php , filebrowserImageUploadUrl : /uploader/upload.php?type=Images });
然后在对应的URL上实现图片上传的功能,并向CKEditor返回特定格式的HTML代码,CKEditor就能正常预览并插入图片了。
下面只截取控制器的部分代码,Controller部分我是这样实现的:
/** * 保存上传的图片 * @return string javascript code * @author lfyzjckhtml' target='_blank'>public function actionImg($type, $CKEditor, $CKEditorFuncNum, $langCode = zh-cn ) if(empty($CKEditorFuncNum) || $type != Images ){ $this- mkhtml($CKEditorFuncNum, , 错误的函数调用 if(isset($_FILES[ upload ])){ //获取关于图片上传配置 $options = Options::model()- findByPk(1); $form = new UploadForm( image ,$options); $form- upload = CUploadedFile::getInstanceByName( upload if($form- validate()){ //文件名:时间+源文件名 $target_filename = date( Ymd-hm ,time()).$form- upload- getName(); $path = Yii::app()- basePath. /../uploads/ .$target_filename; //图片保存路径 $form- upload- saveAs($path); $this- mkhtml($CKEditorFuncNum,Yii::app()- baseUrl. /uploads/ .$target_filename, 上传成功 else{ $this- mkhtml($CKEditorFuncNum, ,$form- getError( upload * 返回CKEditor的提示信息 * @return void * @author lfyzjckprivate function mkhtml($fn, $fileurl, $message) $str = exit($str);}
需要特别说明的mkhtml函数,他会调用CKEditor的函数产生提示信息。上传成功的时候将图片链接返回,CKEditor会根据URL生成图片预览。
然后是UploadForm的代码,这里会验证图片的格式和大小是否符合要求。
class UploadForm extends CFormModel public $upload; private $options; private $type; public function __construct($type, $options){ $this- options = $options; $this- type = $type; * Declares the validation rules. * The rules state that username and password are required, * and password needs to be authenticated. public function rules() return array( array( upload , file , types = $this- options- getAttribute( allow_ .$this- type. _type ), maxSize = 1024 * (int)$this- options- getAttribute( allow_ .$this- type. _maxsize ), tooLarge = 文件大小超过限制 ,}
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP !
相关推荐:
关于Yii Framework框架获取分类下面的所有子类的方法
Yii2如何使用Bootbox插件实现自定义弹窗
使用Yii2 rbac权限控制菜单menu
以上就是Yii和CKEditor实现图片上传的功能的详细内容,PHP教程
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。
新闻热点
疑难解答