程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> yii2整合百度編輯器umeditor,yii2整合umeditor

yii2整合百度編輯器umeditor,yii2整合umeditor

編輯:關於PHP編程

yii2整合百度編輯器umeditor,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怎麼來滴喃,這個就是我們要綁定的目標對象,即contentarticle-content是當前該對象的id標識。

ok,到此百度編輯器基本上整合完畢,現在趕快去添加一篇文章試試看吧,記得更新看看編輯器裡面是否也有內容哦

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved