2019-04-29 13:53:35 2684瀏覽
圖片上傳這項操作是我們每個人都會用到的,本篇文章扣丁學堂PHP培訓小編給讀者們分享一下yii2實現Ueditor百度編輯器的示例代碼,對PHP開發(fā)技術感興趣的小伙伴就隨小編來了解一下吧。
安裝方法:
1、下載yii2-ueditor
2、將下載的yii2-ueditor-master 修改 ueditor (注意:修改成其他文件名請修改插件內對應的命名空間)
3、將文件方在 根目錄/common/widgets 下即可
調用方法:
在backend/controllers中新建一個控制器Demo加入以下代碼
public function actions(){ return [ 'ueditor'=>[ 'class' => 'common\widgets\ueditor\UeditorAction', 'config'=>[ //上傳圖片配置 'imageUrlPrefix' => "", /* 圖片訪問路徑前綴 */ 'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */ ] ] ]; }
第一種調用方式:
在對應的渲染頁面,即views下的頁面中
<?=common\widgets\ueditor\Ueditor::widget(['options'=>['initialFrameWidth' => 850,]])?>
options 填寫配置編輯器的參數(參考ueditor官網)
第二種調用方式:
<?php $form = ActiveForm::begin(); ?> <?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[ 'options'=>[ 'initialFrameWidth' => 850, ] ]) ?> ... <?php ActiveForm::end(); ?>
yii2框架整合了百度編輯器,因為文件上傳采用的是yii2自帶的UploadedFile,這就難免umeditor上傳不成功問題,解決問題的只需要兩個操作步驟,我們來看看具體實現。
創(chuàng)建一個 common/models/Upload.php:代碼為:
<?PHP namespace common\models; use yii\base\Model; use yii\web\UploadedFile; /** * UploadForm is the model behind the upload form. */ class Upload extends Model { /** * @var UploadedFile file attribute */ public $file; /** * @return array the validation rules. */ public function rules() { return [ [['file'], 'file'], ]; } }
需要在剛剛創(chuàng)建的那個控制器Demo里添加actionUploadImage方法處理“富文本框的圖片上傳”內容
use yii\web\UploadedFile; use common\models\Upload; /** * 富文本框的圖片上傳 * @return array */ public function actionUploadImage() { $model = new Upload(); if (Yii::$app->request->isPost) { $model->file = UploadedFile::getInstance($model, "file"); $dir = '/uploads/ueditor/';//文件保存目錄 if (!is_dir($dir)) mkdir($dir); if ($model->validate()) { $fileName = $model->file->baseName . "." . $model->file->extension; $dir = $dir."/". $fileName; $model->file->saveAs($dir); $info = [ "originalName" => $model->file->baseName, "name" => $model->file->baseName, "url" => $dir, "size" => $model->file->size, "type" => $model->file->type, "state" => "SUCCESS", ]; exit(json_encode($info)); } } }
特別提醒:上述返回的$info信息中state狀態(tài)只能是SUCCESS,區(qū)分大小寫。
視圖文件
<?php use yii\widgets\ActiveForm; ?> <?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[ 'options'=>[ 'initialFrameWidth' => 1050,//寬度 'initialFrameHeight' => 550,//高度 ] ]) ?> <div class="form-group"> <?= Html::submitButton('保存', ['class' => 'btn btn-success']) ?> </div> <?php ActiveForm::end() ?>
其中content是字段名稱
最后想要了解更多關于PHP方面內容的小伙伴,請關注扣丁學堂PHP培訓官網、微信等平臺,扣丁學堂IT職業(yè)在線學習教育平臺為您提供權威的PHP開發(fā)視頻,PHP培訓后的前景無限,行業(yè)薪資和未來的發(fā)展會越來越好的,扣丁學堂老師精心推出的PHP視頻教程定能讓你快速掌握PHP從入門到精通開發(fā)實戰(zhàn)技能??鄱W堂PHP技術交流群:374332265。
【關注微信公眾號獲取更多學習資料】 【掃碼進入HTML5前端開發(fā)VIP免費公開課】