yii2整合百度編輯器umeditor及umeditor圖片上傳問題的解決辦法_php執行個體

我們接下來就來聊聊Yii2架構是如何整合百度編輯器umeditor的。

umeditor是啥，我只聽過ueditor,你這umeditor是不是盜版的東東喃？umeditor呢，說白了就是mini版的ueditor，按照百度官方說法，其實就是編輯器中的"短軟小"，但是功能俱全。咳咳，咱們迴歸正題。

首先勒，咱們先去官網下載一份mini版的ueditor umeditor，注意哦，是um editor。

下載下來解壓放到項目根目錄下面的 /css目錄下 命名為umeditor,具體位置各位隨意，後面能引用的到就行。

第二步，我們先去擴充下backend\assets\Appset類，哎呀我擦，為啥要擴充這麼個玩意，跟咱們的umeditor整合啥關係勒，半路殺出個程咬金出來。這裡擴充下這個類檔案的意圖是為了接下來在檔案中方便引入css js檔案滴。

很簡單，在Appset方法中增加下面兩個方法即可

//定義按需載入JS方法，注意載入順序在最後 public static function addScript($view, $jsfile) { $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']); } //定義按需載入css方法，注意載入順序在最後 public static function addCss($view, $cssfile) { $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']); }

接下來，按照下面的配置即可。

先做說明，此處我們假設有一個文章article表，有一個內容content欄位需要顯示為百度編輯器。

按照yii2的表單模型來看，我們修改article\_form.php檔案中的content欄位

<?= $form->field($model, 'content')->textarea(['style' => 'width:760px;height:500px;']) ?> 

該檔案引入Appset類並引入相關的css js檔案如下

use backend\assets\AppAsset;AppAsset::register($this);AppAsset::addCss($this,'/css/umeditor/themes/default/css/umeditor.css');AppAsset::addScript($this,'/css/umeditor/umeditor.config.js');AppAsset::addScript($this,'/css/umeditor/umeditor.min.js');AppAsset::addScript($this,'/css/umeditor/lang/zh-cn/zh-cn.js');

然後只需要在當前頁面底部註冊下面的js代碼即可實現

<?php $this->beginBlock('js-block') ?>$(function () {var um = UM.getEditor('article-content', {});});<?php $this->endBlock() ?><?php $this->registerJs($this->blocks['js-block'], \yii\web\View::POS_END); ?> 

關於article-content怎麼來滴喃，這個就是我們要綁定的目標對象，即content。article-content是當前該對象的id標識。

ok,到此百度編輯器基本上整合完畢，現在趕快去添加一篇文章試試看吧，記得更新看看編輯器裡面是否也有內容哦。

下面給大家介紹 yii2解決百度編輯器umeditor圖片上傳問題。

yii2架構整合了百度編輯器，因為檔案上傳採用的是yii2內建的UploadedFile,這就難免umeditor上傳不成功問題，解決問題的只需要兩個操作步驟，我們來看看具體實現

首先我們先把umeditor的配置搞好，這裡只需要更改imageUrl配置項即可，我們修改其指向/tools/um-upload

那下一步自然是實現/tools/um-upload方法了，

按照ueditor的實現來看，這裡我們上傳成功後只需要返回成功資訊即可

use backend\models\Upload;use yii\web\UploadedFile;/*** 百度umeditor上傳*/public function actionUmUpload (){$model = new Upload();if (Yii::$app->request->isPost) {$model->file = UploadedFile::getInstance($model, 'file');$dir = ‘檔案儲存目錄';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,區分大小寫

