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'=>['上传图片失败']]); } } }
写的不好,仅供自己参考使用