您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“如何解決yii2整合百度編輯器umeditor及umeditor圖片上傳問題”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決yii2整合百度編輯器umeditor及umeditor圖片上傳問題”這篇文章吧。
Yii2框架是如何整合百度編輯器umeditor的。
umeditor是啥,我只聽過ueditor,你這umeditor是不是盜版的東東喃?umeditor呢,說白了就是mini版的ueditor,按照百度官方說法,其實(shí)就是編輯器中的"短軟小",但是功能俱全??瓤龋蹅兓貧w正題。
首先勒,咱們先去官網(wǎng)下載一份mini版的ueditor umeditor,注意哦,是um editor。
下載下來解壓放到項(xiàng)目根目錄下面的 /css目錄下 命名為umeditor,具體位置各位隨意,后面能引用的到就行。
第二步,我們先去擴(kuò)展下backend\assets\Appset類,哎呀我擦,為啥要擴(kuò)展這么個玩意,跟咱們的umeditor整合啥關(guān)系勒,半路殺出個程咬金出來。這里擴(kuò)展下這個類文件的意圖是為了接下來在文件中方便引入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']); }
接下來,按照下面的配置即可。
先做說明,此處我們假設(shè)有一個文章article表,有一個內(nèi)容content字段需要顯示為百度編輯器。
按照yii2的表單模型來看,我們修改article\_form.php文件中的content字段
<?= $form->field($model, 'content')->textarea(['style' => 'width:760px;height:500px;']) ?>
該文件引入Appset類并引入相關(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)前頁面底部注冊下面的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怎么來滴喃,這個就是我們要綁定的目標(biāo)對象,即content。article-content是當(dāng)前該對象的id標(biāo)識。
ok,到此百度編輯器基本上整合完畢,現(xiàn)在趕快去添加一篇文章試試看吧,記得更新看看編輯器里面是否也有內(nèi)容哦。
下面給大家介紹 yii2解決百度編輯器umeditor圖片上傳問題。
yii2框架整合了百度編輯器,因?yàn)槲募蟼鞑捎玫氖莥ii2自帶的UploadedFile,這就難免umeditor上傳不成功問題,解決問題的只需要兩個操作步驟,我們來看看具體實(shí)現(xiàn)
首先我們先把umeditor的配置搞好,這里只需要更改imageUrl配置項(xiàng)即可,我們修改其指向/tools/um-upload
那下一步自然是實(shí)現(xiàn)/tools/um-upload方法了,
按照ueditor的實(shí)現(xiàn)來看,這里我們上傳成功后只需要返回成功信息即可
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ū)分大小寫
以上是“如何解決yii2整合百度編輯器umeditor及umeditor圖片上傳問題”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。