本文實例講述了YII視圖整合kindeditor擴(kuò)展的方法。分享給大家供大家參考,具體如下:
比較喜歡用kindeditor,YII上的版本比較舊,所以自己重新整了個擴(kuò)展
先在protected\extensions下創(chuàng)建KEditor文件夾用來放文件,keSource里放kindeditor的源文件,然后建三個類KEditor、KEditorManage和KEditorUpload,KEditor是擴(kuò)展的主文件,KEditorManage是用來瀏覽服務(wù)器文件的,KEditorUpload是用來示例接收上傳文件的,
KEditor代碼
<?php class KEditor extends CWidget{ /* * TEXTAREA輸入框的屬性,保證js調(diào)用KE失敗時,文本框的樣式。 */ public $textareaOptions=array(); /* * 編輯器屬性集。 */ public $properties=array(); /* * TEXTAREA輸入框的name,必須設(shè)置。 * 數(shù)據(jù)類型: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'); //準(zhǔn)備返回的屬性數(shù)組 $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', ); //準(zhǔn)備返回的屬性數(shù)組 $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().'/'; //圖片擴(kuò)展名 $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); } } //根據(jù)path參數(shù),設(shè)置各路徑和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'] = ''; //文件類別,用擴(kuò)展名判斷 }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(); //文件名,包含擴(kuò)展名 $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; //相對于根目錄的當(dāng)前目錄 $result['current_dir_path'] = $current_dir_path; //當(dāng)前目錄的URL $result['current_url'] = $current_url; //文件數(shù) $result['total_count'] = count($file_list); //文件列表數(shù)組 $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'=>"上傳文件擴(kuò)展名是不允許的擴(kuò)展名。\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文件,設(shè)置上傳文件存放位置
'params'=>array( // this is used in contact page 'adminEmail'=>'webmaster@example.com', 'uploadPath'=>'/upload', //添加這句,upload為存放文件文件夾的名字,自己定義,這里是放在根目錄的upload文件夾
設(shè)置接收文件和瀏覽服務(wù)器文件的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', //設(shè)置name 'properties'=>array( //設(shè)置接收文件上傳的action 'uploadJson'=>'/admin/default/upload', //設(shè)置瀏覽服務(wù)器文件的action,這兩個就是上面配置在/admin/default的 'fileManagerJson'=>'/admin/default/manageJson', 'newlineTag'=>'br', 'allowFileManager'=>true, //傳值前加js:來標(biāo)記這些是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用來設(shè)置textarea的大小和樣式,僅支持rows、cols和style
properties的各項跟js設(shè)置kindeditor的是一樣的,上面的設(shè)置與下面用js設(shè)置的是一致,kindeditor原來有的項都可以設(shè)置
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框架的PHP程序設(shè)計有所幫助。
更多YII視圖整合kindeditor擴(kuò)展的方法相關(guān)文章請關(guān)注PHP中文網(wǎng)!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)
