Yii CKEditorを組み合わせて画像アップロード機能を実装_PHPチュートリアル

最近取り組んでいるプロジェクトでは、WYSIWYG エディターに画像アップロード機能を実装する必要があります。CKEditor のインターフェースが気に入ったため、CKEditor を選択しました。 CKEditor と連携する CKFinder もありますが、機能が複雑すぎるため、CKEditor のドキュメントをざっと見たところ、この機能は CKFinder に頼らなくても自分で実装できることがわかりました。

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

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

コードをコピーします コードは次のとおりです:

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

次に、対応する URL に画像アップロード関数を実装し、特定の形式で HTML コードを返します。 CKEditor に接続すると、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
**/
プライベート関数 mkhtml($fn, $fileurl, $message)
{
$str = '';
exit( $str);
}

mkhtml 関数については特別な説明が必要です。CKEditor 関数を呼び出してプロンプト情報を生成します。アップロードが成功すると、画像リンクが返され、CKEditor は URL に基づいて画像プレビューを生成します。
次に、画像の形式とサイズが要件を満たしているかどうかを確認する UploadForm コードが来ます。

コードをコピーします コードは次のとおりです:

class UploadForm extends CFormModel
{
public $upload;
プライベート $オプション;

プライベート $タイプ;

public function __construct($type, $options){

$this->options = $options;
$this->type = $type;
}
/**
* 検証ルールを宣言します。
* ルールでは、ユーザー名とパスワードが必須であることが示されています。
* パスワードは認証される必要があります。
 */
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'=>'ファイルサイズが制限を超えています',
),
);
}
}

http://www.bkjia.com/PHPjc/802217.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/802217.html技術記事最近取り組んでいるプロジェクトでは、WYSIWYG エディターに画像アップロード機能を実装する必要があるため、CKEditor のインターフェイスが気に入ったため、CKEditor を選択しました。 CKEditor ではうまく動作しますが...