yii2整合百度編輯器umeditor

做者：白狼 出處：www.manks.top/article/yii2_umeditor 

本文版權歸做者，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。

實際工做中，不免不會遇到相似新聞呀，文章呀之類的開發工做，這就要求運營人員去發佈啦，可是喃，有些個小夥伴爲了省事呢，三下五除二，ok，上線了。人家運營的妹子一試用，哎呀呀，你這發佈文章內容給我整了個大點的textarea就算完事啦，發佈一篇新聞你想整死老孃不成。咱們接下來就來聊聊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,到此百度編輯器基本上整合完畢，如今趕快去添加一篇文章試試看吧，記得更新看看編輯器裏面是否也有內容哦