yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
发布:smiling 来源: PHP粉丝网 添加日期:2021-07-29 10:53:28 浏览: 评论:0
我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的。
umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",但是功能俱全。咳咳,咱们回归正题。
首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor。
下载下来解压放到项目根目录下面的 /css目录下 命名为umeditor,具体位置各位随意,后面能引用的到就行。
第二步,我们先去扩展下backend\assets\Appset类,哎呀我擦,为啥要扩展这么个玩意,跟咱们的umeditor整合啥关系勒,半路杀出个程咬金出来。这里扩展下这个类文件的意图是为了接下来在文件中方便引入css js文件滴。
很简单,在Appset方法中增加下面两个方法即可:
- //定义按需加载JS方法,注意加载顺序在最后
- public static function addScript($view, $jsfile) {
- $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);
- }
- //定义按需加载css方法,注意加载顺序在最后
- public static function addCss($view, $cssfile) {
- $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);
- }
接下来,按照下面的配置即可。
先做说明,此处我们假设有一个文章article表,有一个内容content字段需要显示为百度编辑器。
按照yii2的表单模型来看,我们修改article\_form.php文件中的content字段
<?= $form->field($model, 'content')->textarea(['style' => 'width:760px;height:500px;']) ?>
该文件引入Appset类并引入相关的css js文件如下
- use backend\assets\AppAsset;
- AppAsset::register($this);
- AppAsset::addCss($this,'/css/umeditor/themes/default/css/umeditor.css');
- AppAsset::addScript($this,'/css/umeditor/umeditor.config.js');
- AppAsset::addScript($this,'/css/umeditor/umeditor.min.js');
- AppAsset::addScript($this,'/css/umeditor/lang/zh-cn/zh-cn.js');
然后只需要在当前页面底部注册下面的js代码即可实现
- <?php $this->beginBlock('js-block') ?>
- $(function () {
- var um = UM.getEditor('article-content', {
- });
- });
- <?php $this->endBlock() ?>
- <?php $this->registerJs($this->blocks['js-block'], \yii\web\View::POS_END); ?>
关于article-content怎么来滴喃,这个就是我们要绑定的目标对象,即content。article-content是当前该对象的id标识。
ok,到此百度编辑器基本上整合完毕,现在赶快去添加一篇文章试试看吧,记得更新看看编辑器里面是否也有内容哦。
下面给大家介绍 yii2解决百度编辑器umeditor图片上传问题。
yii2框架整合了百度编辑器,因为文件上传采用的是yii2自带的UploadedFile,这就难免umeditor上传不成功问题,解决问题的只需要两个操作步骤,我们来看看具体实现
首先我们先把umeditor的配置搞好,这里只需要更改imageUrl配置项即可,我们修改其指向/tools/um-upload
那下一步自然是实现/tools/um-upload方法了,按照ueditor的实现来看,这里我们上传成功后只需要返回成功信息即可
- use backend\models\Upload;
- use yii\web\UploadedFile;
- /**
- * 百度umeditor上传
- */
- public function actionUmUpload ()
- {
- $model = new Upload();
- if (Yii::$app->request->isPost) {
- $model->file = UploadedFile::getInstance($model, 'file');
- $dir = ‘文件保存目录';
- if (!is_dir($dir))
- mkdir($dir);
- if ($model->validate()) {
- $fileName = $model->file->baseName . '.' . $model->file->extension;
- $dir = $dir.'/'. $fileName;
- $model->file->saveAs($dir);
- $info = [
- "originalName" => $model->file->baseName,
- "name" => $model->file->baseName,
- "url" => $dir,
- "size" => $model->file->size,
- "type" => $model->file->type,
- "state" => 'SUCCESS',
- ];
- exit(json_encode($info));
- }
- }
- }
特别提醒:上述返回的$info信息中state状态只能是SUCCESS,区分大小写
Tags: yii2 umeditor umeditor图片上传
相关文章
- ·yii2超好用的日期组件和时间组件(2019-07-30)
- ·yii2的ActiveForm表单使用的方法介绍(2020-02-15)
- ·Yii2框架的csrf验证原理分析及token缓存解决方案(2020-04-05)
- ·Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源(2021-03-01)
- ·yii2.0之GridView自定义按钮和链接用法(2021-05-03)
- ·列举PHP的Yii 2框架的开发优势(2021-06-08)
- ·Yii2.0高级框架数据库增删改查的一些操作(2021-06-26)
- ·实例讲解yii2.0在php命令行中运行的步骤(2021-06-27)
- ·yii2.0使用Plupload实现带缩放功能的多图上传(2021-06-30)
- ·yii2.0实现验证用户名与邮箱功能(2021-06-30)
- ·yii2中添加验证码的实现方法(2021-07-05)
- ·YII2.0之Activeform表单组件用法实例(2021-07-05)
- ·yii2中使用Active Record模式的方法(2021-07-05)
- ·yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析(2021-07-05)
- ·Yii2框架引用bootstrap中日期插件yii2-date-picker的方法(2021-07-05)
- ·yii2中的rules 自定义验证规则详解(2021-07-29)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)