官方地址：http://ueditor.baidu.com/website/umeditor.html

教程地址：http://fex.baidu.com/ueditor/#start-start

下載umeditor, 放到yii2文件夾, 我是放在common\components

在umeditor目錄下創建一個UMEditorAsset.php文件, 編輯:

<?phpnamespace common\components\umeditor;use yii\web\AssetBundle;class UMEditorAsset extends AssetBundle {public $sourcePath = '@common/components/umeditor';public $css= ['themes/default/css/umeditor.css',];public $js = ['third-party/template.min.js','umeditor.config.js','umeditor.min.js','lang/zh-cn/zh-cn.js',];}

打開backend\assets\AppAsset.php或者frontend\assets\AppAsset.php(看是在后臺用還是在前臺用, 如果都用那么都添加)

public $depends = ['yii\web\YiiAsset','yii\bootstrap\BootstrapAsset','common\components\umeditor\UMEditorAsset',];

這樣就可以使用了, 使用也很簡單:

<?php$form = ActiveForm::begin(['id' => 'message-form']);echo $form->field($model, 'Subject')->textInput(['maxlength' => '30']);echo $form->field($model, 'content')->textarea([]); //用UMEditor取代這個echo '<div class="panel-footer panel-footer-transparent noborder-top pull-right">';echo Html::submitButton('<i class="fa fa-check"></i>' . Yii::t('app', '發送'), ['class' => 'btn btn-info btn-sm']);echo '</div>';ActiveForm::end(); ?>... <?php $this->beginBlock('js-block') ?>$(function () {UM.getEditor('message-content').destroy(); //因為我是用Modal彈框, 所以先銷毀再創建, 否則如果關了彈窗再打開就沒有了.var um = UM.getEditor('message-content', {});um.setWidth("100%");um.setHeight("400");$(".edui-body-container").css("width", "100%");}); <?php $this->endBlock() ?> <?php $this->registerJs($this->blocks['js-block'], \yii\web\View::POS_END); ?>

?

轉載于:https://www.cnblogs.com/zrcx/p/7058461.html

總結

以上是生活随笔為你收集整理的YII2 百度富文本mini版UMEditor的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。