zoukankan      html  css  js  c++  java
  • YII2 百度富文本mini版UMEditor的使用

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

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

    下载umeditor, 放到yii2文件夹, 我是放在commoncomponents

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

    <?php
    
    namespace commoncomponentsumeditor;
    
    
    use yiiwebAssetBundle;
    
    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',
        ];
    
    }

    打开backendassetsAppAsset.php或者frontendassetsAppAsset.php(看是在后台用还是在前台用, 如果都用那么都添加)

        public $depends = [
            'yiiwebYiiAsset',
            'yiiootstrapBootstrapAsset',
            'commoncomponentsumeditorUMEditorAsset',
        ];

    这样就可以使用了, 使用也很简单:

    <?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'], yiiwebView::POS_END); ?>
  • 相关阅读:
    本学期的学习计划
    snmp 学习记录
    解锁树莓派root账号
    树莓派通过阿里云内网穿透,搭建下载机
    golang Ordered Map
    go 切片slice奇怪的地方
    学习scons总结
    go语言学习小结
    学习git版本管理工具
    轻松记账工程冲刺第二阶段10
  • 原文地址:https://www.cnblogs.com/zrcx/p/7058461.html
Copyright © 2011-2022 走看看