我們接下來(lái)就來(lái)聊聊Yii2框架是如何整合百度編輯器umeditor的。

umeditor是啥，我只聽(tīng)過(guò)ueditor,你這umeditor是不是盜版的東東喃？umeditor呢，說(shuō)白了就是mini版的ueditor，按照百度官方說(shuō)法，其實(shí)就是編輯器中的"短軟小"，但是功能俱全?？瓤?，咱們回歸正題。

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

下載下來(lái)解壓放到項(xiàng)目根目錄下面的 /css目錄下 命名為umeditor,具體位置各位隨意，后面能引用的到就行。

第二步，我們先去擴(kuò)展下backend\assets\Appset類(lèi)，哎呀我擦，為啥要擴(kuò)展這么個(gè)玩意，跟咱們的umeditor整合啥關(guān)系勒，半路殺出個(gè)程咬金出來(lái)。這里擴(kuò)展下這個(gè)類(lèi)文件的意圖是為了接下來(lái)在文件中方便引入css js文件滴。

很簡(jiǎn)單，在Appset方法中增加下面兩個(gè)方法即可

//定義按需加載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']);

}

接下來(lái)，按照下面的配置即可。

先做說(shuō)明，此處我們假設(shè)有一個(gè)文章article表，有一個(gè)內(nèi)容content字段需要顯示為百度編輯器。

按照yii2的表單模型來(lái)看，我們修改article\_form.php文件中的content字段

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

該文件引入Appset類(lèi)并引入相關(guān)的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');

然后只需要在當(dāng)前頁(yè)面底部注冊(cè)下面的js代碼即可實(shí)現(xiàn)

<?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); ?>

關(guān)于article-content怎么來(lái)滴喃，這個(gè)就是我們要綁定的目標(biāo)對(duì)象，即content。article-content是當(dāng)前該對(duì)象的id標(biāo)識(shí)。

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

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

yii2框架整合了百度編輯器，因?yàn)槲募蟼鞑捎玫氖莥ii2自帶的UploadedFile,這就難免umeditor上傳不成功問(wèn)題，解決問(wèn)題的只需要兩個(gè)操作步驟，我們來(lái)看看具體實(shí)現(xiàn)

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

那下一步自然是實(shí)現(xiàn)/tools/um-upload方法了，

按照ueditor的實(shí)現(xiàn)來(lái)看，這里我們上傳成功后只需要返回成功信息即可

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狀態(tài)只能是SUCCESS,區(qū)分大小寫(xiě)