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 include加载文件两种方式效率比较
Aug 08 PHP
php设计模式 Visitor 访问者模式
Jun 28 PHP
简单的cookie计数器实现源码
Jun 07 PHP
ThinkPHP的MVC开发机制实例解析
Aug 23 PHP
WIFI万能钥匙密码查询接口实例
Sep 28 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
Mar 23 PHP
Thinkphp和onethink实现微信支付插件
Apr 13 PHP
微信支付开发发货通知实例
Jul 12 PHP
php实现支持中文的文件下载功能示例
Aug 30 PHP
PHP分页显示的方法分析【附PHP通用分页类】
May 10 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
Jun 12 PHP
php下的原生ajax请求用法实例分析
Feb 28 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
小偷PHP+Html+缓存
2006/12/20 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
chrome原生方法之数组
2011/11/30 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python调用webservice接口的实现
2019/07/12 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
利用python生成照片墙的示例代码
2020/04/09 Python
python 装饰器的使用示例
2020/10/10 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
人事主管岗位职责
2014/01/30 职场文书
气象学专业个人求职信
2014/03/15 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
德劲DE1108畅想
2021/04/22 无线电
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL
Python如何将list中的string转换为int
2022/07/15 Ruby