首页 > 代码库 > YII2 百度富文本mini版UMEditor的使用
YII2 百度富文本mini版UMEditor的使用
官方地址: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的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。