YII視圖整合kindeditor擴(kuò)展的方法

字號(hào):


    本文實(shí)例講述了YII視圖整合kindeditor擴(kuò)展的方法。分享給大家供大家參考,具體如下:
    比較喜歡用kindeditor,YII上的版本比較舊,所以自己重新整了個(gè)擴(kuò)展.
    先在protected\extensions下創(chuàng)建KEditor文件夾用來(lái)放文件,keSource里放kindeditor的源文件,然后建三個(gè)類KEditor、KEditorManage和KEditorUpload,KEditor是擴(kuò)展的主文件,KEditorManage是用來(lái)瀏覽服務(wù)器文件的,KEditorUpload是用來(lái)示例接收上傳文件的.
    KEditor代碼
    <?php
    class KEditor extends CWidget{
      /*
       * TEXTAREA輸入框的屬性,保證js調(diào)用KE失敗時(shí),文本框的樣式。
       */
      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']);
        //不允許使用..移動(dòng)到上一級(jí)目錄
        if (preg_match('/\.\./', $current_path)) {
          echo 'Access is not allowed.';
          exit;
        }
        //最后一個(gè)字符不是/
        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();
        //相對(duì)于根目錄的上一級(jí)目錄
        $result['moveup_dir_path'] = $moveup_dir_path;
        //相對(duì)于根目錄的當(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'=>'上傳文件大小超過(guò)限制。'));
            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'=>'未知錯(cuò)誤'));
        }
      }
    }
    配置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添加下面兩句,沒(méi)有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,這兩個(gè)就是上面配置在/admin/default的
        'fileManagerJson'=>'/admin/default/manageJson',
        'newlineTag'=>'br',
        'allowFileManager'=>true,
        //傳值前加js:來(lái)標(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用來(lái)設(shè)置textarea的大小和樣式,僅支持rows、cols和style
    properties的各項(xiàng)跟js設(shè)置kindeditor的是一樣的,上面的設(shè)置與下面用js設(shè)置的是一致,kindeditor原來(lái)有的項(xiàng)都可以設(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'));
      }
    });
    希望本文所述對(duì)大家基于Yii框架的PHP程序設(shè)計(jì)有所幫助。