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 相关文章推荐
adodb与adodb_lite之比较
Dec 31 PHP
基于php设计模式中单例模式的应用分析
May 15 PHP
深入PHP中慎用双等于(==)的详解
Jun 06 PHP
PHP获取youku视频真实flv文件地址的方法
Dec 23 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
Sep 25 PHP
PHP简单实现生成txt文件到指定目录的方法
Apr 25 PHP
php自定义函数实现二维数组排序功能
Jul 20 PHP
PHP购物车类Cart.class.php定义与用法示例
Jul 20 PHP
PHP二进制与字符串之间的相互转换教程
Oct 14 PHP
php简单读取.vcf格式文件的方法示例
Sep 02 PHP
Laravel框架实现的上传图片到七牛功能详解
Sep 06 PHP
laravel7学习之无限级分类的最新实现方法
Sep 30 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
Protoss热键控制
2020/03/14 星际争霸
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python接收手机短信的代码整理
2020/08/02 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
DataReader和DataSet的异同
2014/12/31 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
电大学习个人自我评价范文
2013/10/04 职场文书
会计专业自荐信范文
2013/12/02 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
企业总经理职责
2014/02/02 职场文书
职代会闭幕词
2015/01/28 职场文书
结婚老公保证书
2015/02/26 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis