這幾天做的一個(gè)項(xiàng)目中需要在所見即所得編輯器中實(shí)現(xiàn)圖片上傳的功能，我因?yàn)楸容^喜歡ckeditor的界面而選擇了它。雖然有跟ckeditor配合良好的ckfinder，不過這個(gè)東東的功能太復(fù)雜，簡單看了下ckedtior的文檔，發(fā)現(xiàn)這個(gè)功能還是可以自己實(shí)現(xiàn)而不用借助ckfinder的。
    下面代碼雖然基于yii framework的，但是用其他框架或者語言思路卻是完全一樣的，有需要的童鞋可以參考一下。
    首先要讓ckeditor出現(xiàn)圖片上傳的功能，需要配置編輯器的filebrowserimageuploadurl屬性：
    代碼如下:
    ckeditor.replace( 'editor1',
    {
    filebrowseruploadurl : '/uploader/upload.php',
    filebrowserimageuploadurl : '/uploader/upload.php?type=images'
    });
    然后在對應(yīng)的url上實(shí)現(xiàn)圖片上傳的功能，并向ckeditor返回特定格式的html代碼，ckeditor就能正常預(yù)覽并插入圖片了。
    下面只截取控制器的部分代碼，controller部分我是這樣實(shí)現(xiàn)的：
    代碼如下:
    /**
    * 保存上傳的圖片
    *
    * @return string javascript code
    * @author lfyzjck
    **/
    public function actionimg($type, $ckeditor, $ckeditorfuncnum, $langcode = 'zh-cn')
    {
    if(empty($ckeditorfuncnum) || $type != 'images'){
    $this->mkhtml($ckeditorfuncnum,'','錯(cuò)誤的函數(shù)調(diào)用');
    }
    if(isset($_files['upload'])){
    //獲取關(guān)于圖片上傳配置
    $options = options::model()->findbypk(1);
    $form = new uploadform('image',$options);
    $form->upload = cuploadedfile::getinstancebyname('upload');
    if($form->validate()){
    //文件名：時(shí)間+源文件名
    $target_filename = date('ymd-hm',time()).$form->upload->getname();
    $path = yii::app()->basepath.'/..http://pic02.newdu.com/uploads/'.$target_filename; //圖片保存路徑
    $form->upload->saveas($path);
    $this->mkhtml($ckeditorfuncnum,yii::app()->baseurl.'http://pic02.newdu.com/uploads/'.$target_filename, 上傳成功);
    }
    else{
    $this->mkhtml($ckeditorfuncnum,'',$form->geterror('upload'));
    }
    }
    }
    /**
    * 返回ckeditor的提示信息
    *
    * @return void
    * @author lfyzjck
    **/
    private function mkhtml($fn, $fileurl, $message)
    {
    $str = '';
    exit($str);
    }
    需要特別說明的mkhtml函數(shù)，他會(huì)調(diào)用ckeditor的函數(shù)產(chǎn)生提示信息。上傳成功的時(shí)候?qū)D片鏈接返回，ckeditor會(huì)根據(jù)url生成圖片預(yù)覽。
    然后是uploadform的代碼，這里會(huì)驗(yàn)證圖片的格式和大小是否符合要求。
    代碼如下:
    class uploadform extends cformmodel
    {
    public $upload;
    private $options;
    private $type;
    public function __construct($type, $options){
    $this->options = $options;
    $this->type = $type;
    }
    /**
    * declares the validation rules.
    * the rules state that username and password are required,
    * and password needs to be authenticated.
    */
    public function rules()
    {
    return array(
    array('upload', 'file',
    'types' => $this->options->getattribute(allow_.$this->type._type),
    'maxsize' => 1024 * (int)$this->options->getattribute(allow_.$this->type._maxsize),
    'toolarge'=>'文件大小超過限制',
    ),
    );
    }
    }