關於YII視圖整合kindeditor如何擴充的方法

這篇文章主要介紹了YII視圖整合kindeditor擴充的方法,較為詳細的分析了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  );});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代碼

<?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())) > 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代碼

<?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'));  }});

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