茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
  • <sub id="ddbnn"><ol id="ddbnn"></ol></sub>

  • <legend id="ddbnn"></legend><s id="ddbnn"></s>

    yii2整合百度編輯器umeditor及umeditor圖片上傳問題的解決辦法
    來源:易賢網 閱讀:1277 次 日期:2016-08-26 14:57:06
    溫馨提示:易賢網小編為您整理了“yii2整合百度編輯器umeditor及umeditor圖片上傳問題的解決辦法”,方便廣大網友查閱!

    我們接下來就來聊聊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狀態(tài)只能是SUCCESS,區(qū)分大小寫

    更多信息請查看網絡編程

    2026國考·省考課程試聽報名

    • 報班類型
    • 姓名
    • 手機號
    • 驗證碼
    關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
    工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
    聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
    咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網