yii2整合百度編輯器umeditor及umeditor圖片上傳問題的

2020-03-22 20:25:21

字體：大中小

供稿：網(wǎng)友

PHP yii2整合百度編輯器umeditor及umeditor圖片上傳問題的解決辦法
umeditor是啥，我只聽過ueditor,你這umeditor是不是盜版的東東喃？umeditor呢，說白了就是mini版的ueditor，按照百度官方說法，其實(shí)就是編輯器中的"短軟小"，但是功能俱全?？瓤?，咱們回歸正題。
首先勒，咱們先去網(wǎng)址下載一份mini版的ueditor umeditor，注意哦，是um editor。
下載下來解壓放到項(xiàng)目根目錄下面的 /css目錄下命名為umeditor,具體位置各位隨意，后面能引用的到就行。
第二步，我們先去擴(kuò)展下backend/assets/Appset類，哎呀我擦，為啥要擴(kuò)展這么個(gè)玩意，跟咱們的umeditor整合啥關(guān)系勒，半路殺出個(gè)程咬金出來。這里擴(kuò)展下這個(gè)類文件的意圖是為了接下來在文件中方便引入css html' target='_blank'>js文件滴。
很簡單，在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']); }接下來，按照下面的配置即可。
先做說明，此處我們假設(shè)有一個(gè)文章article表，有一個(gè)內(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怎么來滴喃，這個(gè)就是我們要綁定的目標(biāo)對象，即content。article-content是當(dāng)前該對象的id標(biāo)識。
ok,到此百度編輯器基本上整合完畢，現(xiàn)在趕快去添加一篇文章試試看吧，記得更新看看編輯器里面是否也有內(nèi)容哦。下面給大家介紹yii2解決百度編輯器umeditor圖片上傳問題。yii2框架整合了百度編輯器，因?yàn)槲募蟼鞑捎玫氖莥ii2自帶的UploadedFile,這就難免umeditor上傳不成功問題，解決問題的只需要兩個(gè)操作步驟，我們來看看具體實(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ū)分大小寫PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：Phpstorm+Xdebug斷點(diǎn)調(diào)試PHP的方法php實(shí)例

下一篇：PHP文件處理打開文件