yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法


Posted in PHP onApril 20, 2016

我们接下来就来聊聊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,区分大小写

PHP 相关文章推荐
PHP 编程的 5个良好习惯
Feb 20 PHP
关于PHP5 Session生命周期介绍
Mar 02 PHP
php中批量修改文件后缀名的函数代码
Oct 23 PHP
php 调试利器debug_print_backtrace()
Jul 23 PHP
PHP字符串长度计算 - strlen()函数使用介绍
Oct 15 PHP
PHP中Header使用的HTTP协议及常用方法小结
Nov 04 PHP
php+mysql数据库查询实例
Jan 21 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
Dec 24 PHP
php 无限分类 树形数据格式化代码
Oct 11 PHP
PHP 文件锁与进程锁的使用示例
Aug 07 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
May 29 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
Jun 05 PHP
又拍云异步上传实例教程详解
Apr 19 #PHP
ThinkPHP中order()使用方法详解
Apr 19 #PHP
ThinkPHP中limit()使用方法详解
Apr 19 #PHP
ThinkPHP中where()使用方法详解
Apr 19 #PHP
yii2中的rules 自定义验证规则详解
Apr 19 #PHP
PHP序列化/对象注入漏洞分析
Apr 18 #PHP
php实现三级级联下拉框
Apr 17 #PHP
You might like
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
dedecms中使用php语句指南
2014/11/13 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
JS实现简单打字测试
2020/06/24 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
Python如何实现文本转语音
2016/08/08 Python
python 中random模块的常用方法总结
2017/07/08 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
房地产销售经理岗位职责
2014/01/01 职场文书
教师演讲稿范文
2014/01/08 职场文书
应届大学生自荐书
2014/06/17 职场文书
基层党组织整改方案
2014/10/25 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android