首页 > 代码库 > YII2 百度富文本mini版UMEditor的使用

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

2024-10-09 15:20:39   218人阅读

官方地址：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); ?>

 

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


联系
我们