今天在網(wǎng)上看了下有關(guān)圖片上傳的教程，歷經(jīng)挫折才調(diào)試好，現(xiàn)在把相關(guān)代碼及其說明貼出來，以供初次使用的朋友們參考。
資源下載
yii2.0-ueditor下載路徑：yii2-ueditor-jb51.rar
效果演示：
安裝方法：
1.下載yii2-ueditor
2.將下載的yii2-ueditor-master 修改 ueditor (注意：修改成其他文件名請修改插件內(nèi)對應(yīng)的命名空間)
3.將文件方在 根目錄/common/widgets 下即可
調(diào)用方法：
在backend/controllers中新建一個控制器Demo加入以下代碼
public function actions(){
return [
'ueditor'=>[
'class' => 'common\widgets\ueditor\UeditorAction',
'config'=>[
//上傳圖片配置
'imageUrlPrefix' => "", /* 圖片訪問路徑前綴 */
'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
]
]
];
}
第一種調(diào)用方式：
在對應(yīng)的渲染頁面，即views下的頁面中
?=common\widgets\ueditor\Ueditor::widget(['options'=>['initialFrameWidth' => 850,]])?>
options 填寫配置編輯器的參數(shù)（參考ueditor官網(wǎng)）
第二種調(diào)用方式：
?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框架整合了百度編輯器，因?yàn)槲募蟼鞑捎玫氖莥ii2自帶的UploadedFile,這就難免umeditor上傳不成功問題，解決問題的只需要兩個操作步驟，我們來看看具體實(shí)現(xiàn)
創(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方法處理“富文本框的圖片上傳”內(nèi)容
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是字段名稱
關(guān)于圖片上傳的可以看下：https://www.jb51.net/article/150018.htm
在YII2框架中使用UEditor編輯器發(fā)布文章的地址：https://www.jb51.net/article/150022.htm
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- 詳解在YII2框架中使用UEditor編輯器發(fā)布文章
