作者:白狼 出處: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,到此百度編輯器基本上整合完畢,現在趕快去添加一篇文章試試看吧,記得更新看看編輯器裡面是否也有內容哦