關于YII視圖整合kindeditor如何擴展的方法

2020-03-22 17:50:43

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了YII視圖整合kindeditor擴展的方法,較為詳細的分析了html' target='_blank'>Yii框架整合kindeditor的功能實現代碼與設置相關技巧,需要的朋友可以參考下

本文實例講述了YII視圖整合kindeditor擴展的方法。分享給大家供大家參考，具體如下：

比較喜歡用kindeditor,YII上的版本比較舊,所以自己重新整了個擴展
先在protected/extensions下創建KEditor文件夾用來放文件，keSource里放kindeditor的源文件，然后建三個類KEditor、KEditorManage和KEditorUpload，KEditor是擴展的主文件，KEditorManage是用來瀏覽服務器文件的，KEditorUpload是用來示例接收上傳文件的，

KEditor代碼

 ?phpclass 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= EOFKindEditor.ready(function(K) { var editor_$this- id = K.create( #$this- id ,$properties_string $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代碼

 ?phpclass 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())) //文件夾是否包含文件 $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代碼

 ?phpclass 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 = webmaster@example.com , 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 });

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！