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

官方地址：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的使用相关推荐

yii2 html编辑器,浅析Yii2集成富文本编辑器redactor实例教程
在上篇文章给大家介绍了如何在yii2中集成百度编辑器umeditor以及如何解决umeditor上传图片问题. 今天我们来谈谈yii2集成另外一个强大好用的富文本编辑器Redactor,个人觉得Red ...
百度富文本编辑jsp上传_百度富文本编辑器教程，从入门到放弃
原标题:百度富文本编辑器教程,从入门到放弃百度UEditor 资源与项目分离-完全教程夏老师人真好又求到一篇技术贴来来来继续掏出小本本什么是百度UEditor? 百度UEditor是一款富 ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
vue使用百度富文本编辑器（ueditor）
文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...
html 组件化编辑器,vue.js组件化使用百度富文本编辑器（一）
注意: 本文采用的编辑器为:idea 1.下载百度富文本编辑器,地址:https://ueditor.baidu.com/website/download.html#ueditor 2.加入到stat ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
UEditor 百度富文本编辑器 .Net实例
转自 http://download.csdn.net/download/hdsslxl/6740605 1.UEditor 百度富文本编辑器完整版 .Net实例已解决上传图片问题. 2.内附完整d ...
解决百度富文本框中添加的表格页面获取后不显示表格边框的问题
在百度富文本框添加表格后可以右击设置表格边框是否可见,设为可见就可以显示了转载于:https://www.cnblogs.com/missguolf/p/9076535.html

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

YII2 百度富文本mini版UMEditor的使用相关推荐

最新文章

热门文章