本文實例講述了YII視圖整合kindeditor擴展的方法。分享給大家供大家參考,具體如下:
比較喜歡用kindeditor,YII上的版本比較舊,所以自己重新整了個擴展
先在protected\extensions下創建KEditor文件夾用來放文件,keSource裡放kindeditor的源文件,然後建三個類KEditor、KEditorManage和KEditorUpload,KEditor是擴展的主文件,KEditorManage是用來浏覽服務器文件的,KEditorUpload是用來示例接收上傳文件的,
KEditor代碼
<?php class KEditor extends CWidget{ /* * TEXTAREA輸入框的屬性,保證js調用KE失敗時,文本框的樣式。 */ public $textareaOptions=array(); /* * 編輯器屬性集。 */ public $properties=array(); /* * TEXTAREA輸入框的name,必須設置。 * 數據類型:String */ public $name; /* * TEXTAREA的id,可為空 */ public $id; public $model; public $baseUrl; public static function getUploadPath(){ $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.'keSource'; if(isset(Yii::app()->params->uploadPath)){ return Yii::getPathOfAlias('webroot').str_replace( '/',DIRECTORY_SEPARATOR, Yii::app()->params-> uploadPath); } return Yii::app()->getAssetmanager() ->getPublishedPath($dir).DIRECTORY_SEPARATOR.'upload'; } public static function getUploadUrl(){ $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.'keSource'; if(isset(Yii::app()->params->uploadPath)){ return Yii::app()->baseUrl.Yii::app()->params->uploadPath; } return Yii::app()->getAssetManager()->publish($dir).'/upload'; } public function init(){ if($this->name===null) throw new CException(Yii::t('zii','The id property cannot be empty.')); $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.'keSource'; $this->baseUrl=Yii::app()->getAssetManager()->publish($dir); $cs=Yii::app()->getClientScript(); $cs->registerCssFile($this->baseUrl.'/themes/default/default.css'); if(YII_DEBUG) $cs->registerScriptFile($this->baseUrl.'/kindeditor.js'); else $cs->registerScriptFile($this->baseUrl.'/kindeditor-min.js'); } public function run(){ $cs=Yii::app()->getClientScript(); $textAreaOptions=$this->gettextareaOptions(); $textAreaOptions['name']=CHtml::resolveName($this->model,$this->name); $this->id=$textAreaOptions['id']=CHtml::getIdByName($textAreaOptions['name']); echo CHtml::activeTextArea($this->model,$this->name,$textAreaOptions); $properties_string = CJavaScript::encode($this->getKeProperties()); $js=<<<EOF KindEditor.ready(function(K) { var editor_$this->id = K.create('#$this->id', $properties_string ); }); EOF; $cs->registerScript('KE'.$this->name,$js,CClientScript::POS_HEAD); } public function gettextareaOptions(){ //允許獲取的屬性 $allowParams=array('rows','cols','style'); //准備返回的屬性數組 $params=array(); foreach($allowParams as $key){ if(isset($this->textareaOptions[$key])) $params[$key]=$this->textareaOptions[$key]; } $params['name']=$params['id']=$this->name; return $params; } public function getKeProperties(){ $properties_key=array( 'width', 'height', 'minWidth', 'minHeight', 'items', 'noDisableItems', 'filterMode', 'htmlTags', 'wellFormatMode', 'resizeType', 'themeType', 'langType', 'designMode', 'fullscreenMode', 'basePath', 'themesPath', 'pluginsPath', 'langPath', 'minChangeSize', 'urlType', 'newlineTag', 'pasteType', 'dialogAlignType', 'shadowMode', 'useContextmenu', 'syncType', 'indentChar', 'cssPath', 'cssData', 'bodyClass', 'colorTable', 'afterCreate', 'afterChange', 'afterTab', 'afterFocus', 'afterBlur', 'afterUpload', 'uploadJson', 'fileManagerJson', 'allowPreviewEmoticons', 'allowImageUpload', 'allowFlashUpload', 'allowMediaUpload', 'allowFileUpload', 'allowFileManager', 'fontSizeTable', 'imageTabIndex', 'formatUploadUrl', 'fullscreenShortcut', 'extraFileUploadParams', ); //准備返回的屬性數組 $params=array(); foreach($properties_key as $key){ if(isset($this->properties[$key])) $params[$key]=$this->properties[$key]; } return $params; } }
KEditorManage代碼
<?php class KEditorManage extends CAction{ public function run(){ Yii::import('ext.KEditor.KEditor'); $root_path=KEditor::getUploadPath().'/'; $root_url=KEditor::getUploadUrl().'/'; //圖片擴展名 $ext_arr = array('gif', 'jpg', 'jpeg', 'png', 'bmp'); //目錄名 $dir_name = empty($_GET['dir']) ? '' : trim($_GET['dir']); if (!in_array($dir_name, array('', 'image', 'flash', 'media', 'file'))) { echo "Invalid Directory name."; exit; } if ($dir_name !== '') { $root_path .= $dir_name . "/"; $root_url .= $dir_name . "/"; if (!file_exists($root_path)) { mkdir($root_path); } } //根據path參數,設置各路徑和URL if (empty($_GET['path'])) { $current_path = realpath($root_path) . '/'; $current_url = $root_url; $current_dir_path = ''; $moveup_dir_path = ''; } else { $current_path = realpath($root_path) . '/' . $_GET['path']; $current_url = $root_url . $_GET['path']; $current_dir_path = $_GET['path']; $moveup_dir_path = preg_replace('/(.*?)[^\/]+\/$/', '$1', $current_dir_path); } echo realpath($root_path); //排序形式,name or size or type $order = empty($_GET['order']) ? 'name' : strtolower($_GET['order']); //不允許使用..移動到上一級目錄 if (preg_match('/\.\./', $current_path)) { echo 'Access is not allowed.'; exit; } //最後一個字符不是/ if (!preg_match('/\/$/', $current_path)) { echo 'Parameter is not valid.'; exit; } //目錄不存在或不是目錄 if (!file_exists($current_path) || !is_dir($current_path)) { echo 'Directory does not exist.'; exit; } //遍歷目錄取得文件信息 $file_list = array(); $handle = new DirectoryIterator($current_path); $i=0; foreach($handle as $file){ if($file->isDot()) continue; if($file->isDir()){ $file_list[$i]['is_dir'] = true; //是否文件夾 $file_list[$i]['has_file'] = (count(scandir($file->getPath())) > 2); //文件夾是否包含文件 $file_list[$i]['filesize'] = 0; //文件大小 $file_list[$i]['is_photo'] = false; //是否圖片 $file_list[$i]['filetype'] = ''; //文件類別,用擴展名判斷 }else{ $file_list[$i]['is_dir'] = false; $file_list[$i]['has_file'] = false; $file_list[$i]['filesize'] = $file->getSize(); $file_list[$i]['dir_path'] = ''; $file_ext = $file->getExtension(); $file_list[$i]['is_photo'] = in_array($file_ext, $ext_arr); $file_list[$i]['filetype'] = $file_ext; } $file_list[$i]['filename'] = $file->getFilename(); //文件名,包含擴展名 $file_list[$i]['datetime'] = date('Y-m-d H:i:s', $file->getMTime()); $i++; } usort($file_list, array($this,'cmp_func')); $result = array(); //相對於根目錄的上一級目錄 $result['moveup_dir_path'] = $moveup_dir_path; //相對於根目錄的當前目錄 $result['current_dir_path'] = $current_dir_path; //當前目錄的URL $result['current_url'] = $current_url; //文件數 $result['total_count'] = count($file_list); //文件列表數組 $result['file_list'] = $file_list; //輸出JSON字符串 header('Content-type: application/json; charset=UTF-8'); echo CJSON::encode($result); exit; } //排序 public function cmp_func($a, $b) { global $order; if ($a['is_dir'] && !$b['is_dir']) { return -1; } else if (!$a['is_dir'] && $b['is_dir']) { return 1; } else { if ($order == 'size') { if ($a['filesize'] > $b['filesize']) { return 1; } else if ($a['filesize'] < $b['filesize']) { return -1; } else { return 0; } } else if ($order == 'type') { return strcmp($a['filetype'], $b['filetype']); } else { return strcmp($a['filename'], $b['filename']); } } } } ?>
KEditorUpload代碼
<?php class KEditorUpload extends CAction{ public function run(){ $dir=isset($_GET['dir'])?trim($_GET['dir']):'file'; $ext_arr = array( 'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'), 'flash' => array('swf', 'flv'), 'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'), 'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2'), ); if(empty($ext_arr[$dir])){ echo CJSON::encode(array('error'=>1,'message'=>'目錄名不正確。')); exit; } $originalurl=''; $filename=''; $date=date('Ymd'); $id=0; $max_size=2097152; //2MBs $upload_image=CUploadedFile::getInstanceByName('imgFile'); Yii::import('ext.KEditor.KEditor'); $upload_dir=KEditor::getUploadPath().'/'.$dir; if(!file_exists($upload_dir)) mkdir($upload_dir); $upload_dir=$upload_dir.'/'.$date; if(!file_exists($upload_dir)) mkdir($upload_dir); $upload_url=KEditor::getUploadUrl().'/'.$dir.'/'.$date; if(is_object($upload_image) && get_class($upload_image)==='CUploadedFile'){ if($upload_image->size > $max_size){ echo CJSON::encode(array('error'=>1,'message'=>'上傳文件大小超過限制。')); exit; } //新文件名 $filename=date("YmdHis").'_'.rand(10000, 99999); $ext=$upload_image->extensionName; if(in_array($ext, $ext_arr[$dir]) === false){ echo CJSON::encode(array('error'=>1,'message'=>"上傳文件擴展名是不允許的擴展名。\n只允許".implode(',',$ext_arr[$dir]).'格式。')); exit; } $uploadfile=$upload_dir.'/'.$filename.'.'.$ext; $originalurl=$upload_url.'/'.$filename.'.'.$ext; $upload_image->saveAs($uploadfile); echo CJSON::encode(array('error'=>0,'url'=>$originalurl)); }else{ echo CJSON::encode(array('error'=>1,'message'=>'未知錯誤')); } } }
配置config/main.php文件,設置上傳文件存放位置
'params'=>array( // this is used in contact page 'adminEmail'=>'[email protected]', 'uploadPath'=>'/upload', //添加這句,upload為存放文件文件夾的名字,自己定義,這裡是放在根目錄的upload文件夾
設置接收文件和浏覽服務器文件的action
public function actions() { return array( //在actions下的return array添加下面兩句,沒有actions的話自己添加 'upload'=>array('class'=>'application.extensions.KEditor.KEditorUpload'), 'manageJson'=>array('class'=>'application.extensions.KEditor.KEditorManage'), ); }
在視圖裡面使用
<?php $this->widget('ext.KEditor.KEditor',array( 'model'=>$model, //傳入form model 'name'=>'content', //設置name 'properties'=>array( //設置接收文件上傳的action 'uploadJson'=>'/admin/default/upload', //設置浏覽服務器文件的action,這兩個就是上面配置在/admin/default的 'fileManagerJson'=>'/admin/default/manageJson', 'newlineTag'=>'br', 'allowFileManager'=>true, //傳值前加js:來標記這些是js代碼 'afterCreate'=>"js:function() { K('#ChapterForm_all_len').val(this.count()); K('#ChapterForm_word_len').val(this.count('text')); }", 'afterChange'=>"js:function() { K('#ChapterForm_all_len').val(this.count()); K('#ChapterForm_word_len').val(this.count('text')); }", ), 'textareaOptions'=>array( 'style'=>'width:98%;height:400px;', ) )); ?>
textareaOptions用來設置textarea的大小和樣式,僅支持rows、cols和style
properties的各項跟js設置kindeditor的是一樣的,上面的設置與下面用js設置的是一致,kindeditor原來有的項都可以設置
var editor1 = K.create('#editor_modelname_name', { uploadJson : "/admin/default/upload", fileManagerJson : "/admin/default/manageJson", newlineTag : "br", allowFileManager : true, afterCreate : function() { K('#ChapterForm_all_len').html(this.count()); K('#ChapterForm_word_len').html(this.count('text')); }, afterChange : function() { K('#ChapterForm_all_len').html(this.count()); K('#ChapterForm_word_len').html(this.count('text')); } });
更多關於Yii相關內容感興趣的讀者可查看本站專題:《Yii框架入門及常用技巧總結》、《php優秀開發框架總結》、《smarty模板入門基礎教程》、《php操作office文檔技巧總結(包括word,excel,access,ppt)》、《php面向對象程序設計入門教程》、《php字符串(string)用法總結》、《php+mysql數據庫操作入門教程》及《php常見數據庫操作技巧匯總》
希望本文所述對大家基於Yii框架的PHP程序設計有所幫助。