今天在網上看了下有關圖片上傳的教程，歷經挫折才除錯好，現在把相關程式碼及其說明貼出來，以供初次使用的朋友們參考。

資源下載

yii2.0-ueditor下載路徑：

https://link.jianshu.com?t=https://github.com/org-yii-china/yii2-ueditor/archive/master.zip

效果演示：

安裝方法：

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上傳不成功問題，解決問題的只需要兩個操作步驟，我們來看看具體實現

建立一個 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'],
        ];
    }
}

需要在剛剛建立的那個控制器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狀態只能是SUCCESS,區分大小寫

檢視檔案

<?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是欄位名稱

關於圖片上傳的可以看下：

https://www.yiichina.com/tutorial/862

在YII2框架中使用UEditor編輯器釋出文章的地址：

https://www.cnblogs.com/felixji/p/6698436.html

原文地址：https://segmentfault.com/a/1190000016878464