yii2-Ueditor百度編輯器
阿新 • • 發佈:2018-11-15
今天在網上看了下有關圖片上傳的教程,歷經挫折才除錯好,現在把相關程式碼及其說明貼出來,以供初次使用的朋友們參考。
資源下載
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