wangeditor在移动端的web应用
废话不多说,直接上代码
前端(前端多说一句,在初始使用阶段,不知道是怎么回事,复制在看云上的文档的配置参数时,一直有错误,后台获取不到$_file,整整一上午,下午上网搜了一下别人的上传图片代码才好用,不知道是不是官方弄错了,咱也不敢说,咱也不敢问的)
<div id="editor"></div>
<script>
var E = window.wangEditor
var editor = new E('#editor')
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
// 'foreColor', // 文字颜色
// 'fontSize', // 字号
// 'fontName', // 字体
// 'italic', // 斜体
// 'underline', // 下划线
// 'strikeThrough', // 删除线 // 'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
// 'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
//过滤粘贴过来的文本样式
editor.customConfig.pasteFilterStyle = true
//忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = false
//上传图片的配置
editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
editor.customConfig.uploadImgServer = '设置上传路径'; //设置上传文件的服务器路径
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
//自定义上传图片事件
editor.customConfig.uploadImgHooks = {
before : function(xhr, editor, files) { },
success : function(xhr, editor, result) {
console.log("上传成功");
},
fail : function(xhr, editor, result) {
layer.msg("上传失败");
},
error : function(xhr, editor) {
console.log("上传出错");
},
timeout : function(xhr, editor) {
console.log("上传超时");
}
}
editor.create()
E.fullscreen.init('#editor');
</script>
后端代码,后端是自己写的,之前一直从网上扒人家的代码,昨天自己匆匆学习了一下,自己写了个简单的代码去实现,实现逻辑无非创建到指定目录下(file_exists函数),如果该路径下没有该文件夹,就新建一个文件夹,创建文件夹用mkdir,就是linux的创建文件夹命令,move_uploaded_file($tmp,$dest),$tmp是文件上传的过来的临时路径,$dest是设置的保存路径,并且是系统的绝对路径,带文件名。我使用的框架是tp5.1,它是不支持常量的,所以要使用系统常量必须引入think\facade\Env,后期会用到图片压缩的功能,所以后期还会学习记录一下前端和后端的图片压缩。
public function up()
{
$file = $_FILES;
if(empty($file)){
$result["error"] = "1";
$result['data'] = '';
}else{
$tmp = $file['myFile']['tmp_name'];
$houzhui = substr($file['myFile']['type'],6);
$foder = date('Ymd',time());
$fileName = 'XX'.time().'.'.$houzhui;
$root_path = Env::get('root_path');
$dest = $root_path.'/public/upload/image/'.$foder.'/'.$fileName;
if(!file_exists($root_path.'/public/upload/image/'.$foder)){
mkdir($root_path.'/public/upload/image/'.$foder);
}
$result = move_uploaded_file($tmp,$dest); if($result){
return json(['errno'=>0,'data'=>['/ueditor/php/upload/image/'.$foder.'/'.$fileName]]);
}else{
return json(['errno'=>2,'data'=>['上传图片失败']]);
} }
}
写的不好,仅供自己参考使用
wangeditor在移动端的web应用的更多相关文章
- JS判断当前使用设备是pc端还是web端(转MirageFireFox)
js判断当前设备 最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实. 仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站. 站点 PC端url we ...
- dr-helper项目设计介绍(一个包括移动端和Web端的点餐管理系统)
一.源代码路径 https://github.com/weiganyi/dr-helper 二.界面 通过浏览器訪问Web服务,能够看到界面例如以下: ADT-Bundle编译project生成dr- ...
- 1、移动端 2、后台 3、 移动端,Web 端 4、 PC端
移动端: 1.公众号:停开心 住总物业 2.app: iso Android 停开心,住总停开心 后台:停开心智慧停车管理平台(所有的停车场) 移动端,Web端: 海投OA,公司OA PC端:收费软 ...
- SignalR控制台自托管服务端向web客户端指定用户推送数据,客户端断线重连
一.前言 SignalR是微软推出的开源实时通信框架.其内部使用Web Socket, Server Sent Events 和 Long Polling作为底层传输方式,SignalR会根据客户端和 ...
- 移动端与Web端疫情数据展示
1.题目要求 2.整体思想 首先是在前两阶段已经完成的echarts可视化.利用Jsoup爬取疫情数据基础上来进行调用与完善.大致思想是在Android Studio上完成交互去调用ecplise中的 ...
- 移动端调试Web页面
移动端调试Web页面 虽然可以在PC下,通过开发者工具,模拟移动端,但是这样只能模拟页面样式,对于代码的执行情况是无法模拟的,所以在此结合实际调试经验,针对安卓与IOS设备,进行总结. IOS 安卓 ...
- 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile
web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/ 很厉害的一个个人产品 http://amazeui ...
- 移动端与web端的测试点的差别
单纯从功能测试的层面上来讲的话,APP 测试.web 测试 在流程和功能测试上是没有区别的.根据两者载体不一样,则区别如下:系统结构方面web项目,b/s架构,基于浏览器的:web测试只要更新了服务器 ...
- 如何利用cURL和python对服务端和web端进行接口测试
工具描述 cURL是利用URL语法在命令行方式下工作的文件传输工具,是开源爱好者编写维护的免费工具,支持包括Windows.Linux.Mac等数十个操作系统,最新版本为7.27.0,但是我推荐大家使 ...
随机推荐
- [linux][mysql] 命令更改表结构:添加、删除、修改字段、调整字段顺序
原文出处:http://www.phpernote.com/MySQL/1120.html 查看表结构: desc tabl_name; show columns fromtable_name: 常用 ...
- mongoDB(一)——mongoDB安装部署和常用shell命令
1.mongoDB简介 mongoDB 是由C++语言编写的,是一种分布式的面向文档存储的开源nosql数据库.nosql是Not Only SQL的缩写,是对不同于传统的关系型数据库的数据库管理系统 ...
- Liunx常用操作(二)-vim中删除命令
VIM简介 Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性.VIM是自由软件.Vim普遍被推崇为类Vi编辑器中最好的一个,事实上真正的劲敌来自Ema ...
- 初学者的Pygame安装教程
最近在自学python,在看完了些基础知识之后,准备写个小项目[外星人入侵],这个项目需要安装pygame. 所以就在网上找到了两个下载地址https://bitbucket.org/pygame/p ...
- php表格--大数据处理
参考来源1:https://blog.csdn.net/tim_phper/article/details/77581071 参考来源2:https://blog.csdn.net/qq_376822 ...
- (二)PL/SQL特殊符号
PL/SQL标识符 PL/SQL标识符是常量,变量,异常,过程,游标和保留字.标识符是由一个字母后面可以跟更多的字母,数字,美元符号,下划线和数字符号,并且不得超过30个字符. 默认情况下,标识符不区 ...
- 串口字符串-HEX格式
串口字符串-HEX格式 C++SerialSerialPortHEX 介绍 串口通信过程中 通常涉及一个数据的模拟过程以及数据发送过程, 一般来说, 我们会发送一串指令给下位机 68 05 00 84 ...
- Maven+Jmeter+Jenkins的持续集成的新尝试
前言: 这又是一篇迟到很久的文章,四月身体欠佳,根本不在状态. 好了,回到正题,相信大家也在很多博客,看过很多类似乎的文章,那么大家来看看我是如何实现的? 准备工作: 创建一个maven工程 创建一个 ...
- CSAPP Chapter 8:Exception Control Flow
prcesssor在运行时,假设program counter的值为a0, a1, ... , an-1,每个ak表示相对应的instruction的地址.从ak到ak+1的变化被称为control ...
- centos分配IP脚本--写的第一个shell脚本
IDC小菜鸟一枚,非科班出身.常常有客户的centos服务器需要分配15个IP甚至30个IP.每次需要手动分配十分麻烦,于是花了一天时间学了shell脚本,写了这个脚本. #!/bin/bash re ...