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