YII2 百度富文本mini版UMEditor的使用

Posted 2020-09-23 WonderBlog

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

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

下载umeditor, 放到yii2文件夹, 我是放在common\\components

在umeditor目录下创建一个UMEditorAsset.php文件, 编辑:

<?php

namespace 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); ?>