第yii2實現(xiàn)Ueditor百度編輯器的示例代碼今天在網上看了下有關圖片上傳的教程，歷經挫折才調試好，現(xiàn)在把相關代碼及其說明貼出來，以供初次使用的朋友們參考。

資源下載

yii2.0-ueditor下載路徑：yii2-ueditor-jb51.rar

效果演示：

安裝方法：

1.下載yii2-ueditor

2.將下載的yii2-ueditor-master修改ueditor(注意：修改成其他文件名請修改插件內對應的命名空間)

3.將文件方在根目錄/common/widgets下即可

調用方法：

在backend/controllers中新建一個控制器Demo加入以下代碼

publicfunctionactions(){

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填寫配置編輯器的參數(shù)（參考ueditor官網）

第二種調用方式：

php$form=ActiveForm::begin();

=$form-field($model,'title')-textInput(['maxlength'=true])

=$form-field($model,'content')-widget('common\widgets\ueditor\Ueditor',[

'options'=[

'initialFrameWidth'=850,

phpActiveForm::end();

yii2框架整合了百度編輯器，因為文件上傳采用的是yii2自帶的UploadedFile,這就難免umeditor上傳不成功問題，解決問題的只需要兩個操作步驟，我們來看看具體實現(xiàn)

創(chuàng)建一個common/models/Upload.php:代碼為：

namespacecommon\models;

useyii\base\Model;

useyii\web\UploadedFile;

*UploadFormisthemodelbehindtheuploadform.

classUploadextendsModel

*@varUploadedFilefileattribute

public$file;

*@returnarraythevalidationrules.

publicfunctionrules()

return[

[['file'],'file'],

}

需要在剛剛創(chuàng)建的那個控制器Demo里添加actionUploadImage方法處理“富文本框的圖片上傳”內容

useyii\web\UploadedFile;

usecommon\models\Upload;

*富文本框的圖片上傳

*@returnarray

publicfunctionactionUploadImage()

$model=newUpload();

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",