Yii CKEditorと組み合わせた画像アップロード機能を実現します。


ここ数日やっているプロジェクトの中で、見たところ、つまり所得エディタで画像アップロードの機能を実現する必要があります。私はCKEditorのインターフェイスが好きですから、それを選びました。CKEditorとの相性の良いCK Finderがありますが、この东の机能は复雑すぎて、简単にCKEdtionrのドキュメントを见て、この机能は自分でCK Finderの助けを借りずに実现できます。
以下のコードはYii Fraamewarkに基づいていますが、他のフレームや言語で考え方は全く同じです。必要な子供靴があります。参考にしてください。
まず、CkEditorに画像アップロードの機能を表示させるには、エディタのfilebrowserImageUploadUrl属性を設定する必要があります。

CKEDITOR.replace( 'editor1',
    {
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserImageUploadUrl : '/uploader/upload.php?type=Images'
    });
以降、対応するURLに画像アップロードの機能を実現し、CKEditorに特定のフォーマットのHTMLコードを返すと、CKEditorは正常にプレビューして画像を挿入することができます。以下はコントローラのコードの一部だけを切り取ります。Controller部分はこのように実現します。

/**
 *
 *
 * @return string javascript code
 * @author lfyzjck
 **/
public function actionImg($type, $CKEditor, $CKEditorFuncNum, $langCode = 'zh-cn')
{
 if(empty($CKEditorFuncNum) || $type != 'Images'){
  $this->mkhtml($CKEditorFuncNum,'',' ');
 }
 if(isset($_FILES['upload'])){
  //
  $options = Options::model()->findByPk(1);
  $form = new UploadForm('image',$options);
  $form->upload = CUploadedFile::getInstanceByName('upload');
  if($form->validate()){
  // : +
   $target_filename = date('Ymd-hm',time()).$form->upload->getName();
   $path = Yii::app()->basePath.'/../uploads/'.$target_filename;   //
   $form->upload->saveAs($path);
   $this->mkhtml($CKEditorFuncNum,Yii::app()->baseUrl.'/uploads/'.$target_filename, " ");
  }
  else{
   $this->mkhtml($CKEditorFuncNum,'',$form->getError('upload'));
  }
 }
}
/**
 * CKEditor
 *
 * @return void
 * @author lfyzjck
 **/
private function mkhtml($fn, $fileurl, $message)
{
 $str = '';
 exit($str);
}
は特に説明するmk)関数が必要で、彼はCKEditorの関数を呼び出してヒント情報を生成します。アップロードに成功したときは、リンクを返します。CKEditorはURLから画像プレビューを生成します。
次にUploadFormのコードです。ここで画像のフォーマットとサイズが要求に合っているかどうかを検証します。

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