《PHP學習：yii2整合百度編輯器umeditor及umeditor圖片上傳問題的解決辦法》要點：
本文介紹了PHP學習：yii2整合百度編輯器umeditor及umeditor圖片上傳問題的解決辦法，希望對您有用。如果有疑問，可以聯系我們。
相關主題：YII框架
我們接下來就來聊聊Yii2框架是如何整合百度編輯器umeditor的.
PHP實例
umeditor是啥,我只聽過ueditor,你這umeditor是不是盜版的東東喃?umeditor呢,說白了就是mini版的ueditor,依照百度官方說法,其實就是編輯器中的"短軟小",但是功能俱全.咳咳,咱們回歸正題.
PHP實例
首先勒,咱們先去官網下載一份mini版的ueditor umeditor,注意哦,是um editor.
PHP實例
下載下來解壓放到項目根目錄下面的 /css目錄下 命名為umeditor,具體位置各位隨意,后面能引用的到就行.
PHP實例
第二步,我們先去擴展下backend\assets\Appset類,哎呀我擦,為啥要擴展這么個玩意,跟咱們的umeditor整合啥關系勒,半路殺出個程咬金出來.這里擴展下這個類文件的意圖是為了接下來在文件中方便引入css js文件滴.
PHP實例
很簡單,在Appset辦法中增加下面兩個辦法即可PHP實例
//定義按需加載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']);
}
接下來,依照下面的配置即可.
PHP實例
先做說明,此處我們假設有一個文章article表,有一個內容content字段需要顯示為百度編輯器.
PHP實例
依照yii2的表單模型來看,我們修改article\_form.php文件中的content字段PHP實例
<?= $form->field($model, 'content')->textarea(['style' => 'width:760px;height:500px;']) ?>
該文件引入Appset類并引入相關的css js文件如下PHP實例
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實例
<?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標識.
PHP實例
ok,到此百度編輯器基本上整合完畢,現在趕快去添加一篇文章試試看吧,記得更新看看編輯器里面是否也有內容哦.PHP實例
下面給大家介紹?yii2辦理百度編輯器umeditor圖片上傳問題.PHP實例
yii2框架整合了百度編輯器,因為文件上傳采用的是yii2自帶的UploadedFile,這就難免umeditor上傳不成功問題,辦理問題的只需要兩個操作步驟,我們來看看具體實現
PHP實例
首先我們先把umeditor的配置搞好,這里只需要更改imageUrl配置項即可,我們修改其指向/tools/um-uploadPHP實例
那下一步自然是實現/tools/um-upload辦法了,PHP實例
依照ueditor的實現來看,這里我們上傳成功后只需要返回成功信息即可PHP實例
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,區分大小寫PHP實例
《PHP學習：yii2整合百度編輯器umeditor及umeditor圖片上傳問題的解決辦法》是否對您有啟發，歡迎查看更多與《PHP學習：yii2整合百度編輯器umeditor及umeditor圖片上傳問題的解決辦法》相關教程，學精學透。維易PHP學院為您提供精彩教程。
轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/6871.html
