YiiとCKEditorが画像アップロード機能を実装

この記事では、Yii と CKEditor を組み合わせた画像アップロード機能を主に紹介します。Yii は有名な PHP 開発フレームワークであり、CKEditor は有名な WYSIWYG エディターです。

プロジェクトで使用することができます。数日前に作業したのですが、WYSIWYG エディターで画像アップロード機能を実装する必要がありました。インターフェースが気に入ったので CKEditor を選択しました。 CKEditor と連携する CKFinder もありますが、その機能は複雑すぎます。CKEditor のドキュメントをざっと見たところ、この機能は CKFinder を使わずに自分で実装できることがわかりました。

次のコードは Yii フレームワークに基づいていますが、他のフレームワークや言語を使用する場合も考え方はまったく同じです。必要な子供用の靴を参照できます。

まず、CkEditor で画像アップロード機能を有効にするには、エディターの filebrowserImageUploadUrl 属性を設定する必要があります。

CKEDITOR.replace( 'editor1',
    {
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserImageUploadUrl : '/uploader/upload.php?type=Images'
    });

次に、対応する URL で画像アップロード機能を実装し、 CKEditor HTML コードに特定の形式を追加すると、CKEditor は通常どおり画像をプレビューして挿入できます。
コントローラーのコードの一部のみを以下に示します。私はコントローラー部分を次のように実装しました。

/**
 * 保存上传的图片
 *
 * @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);
}

特別な説明が必要な mkhtml 関数は、プロンプト情報を生成するために 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'=>'文件大小超过限制',
   ),
  );
 }
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Yii について カテゴリの下にあるすべてのサブクラスを取得するフレームワーク メソッド

Yii2 が Bootbox プラグインを使用してカスタム ポップアップ ウィンドウを実装する方法

# #Yii2 rbac 権限制御メニューを使用するメニュー

以上がYiiとCKEditorが画像アップロード機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。