zoukankan      html  css  js  c++  java
  • 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,它是不支持常量的,所以要使用系统常量必须引入thinkfacadeEnv,后期会用到图片压缩的功能,所以后期还会学习记录一下前端和后端的图片压缩。

    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'=>['上传图片失败']]);
                }
    
            }
        }
    

      写的不好,仅供自己参考使用

    
    
    
  • 相关阅读:
    LeetCode 25. Reverse Nodes in k-Group
    LeetCode 66. Plus One
    LeetCode 69. Sqrt(x)
    很认真的聊一聊程序员的自我修养
    LeetCode 24. Swap Nodes in Pairs
    unordered_map和map的区别
    子查询一定要注意,别忘记加TOP 1,不然就GG了,过了好久测试给我测出来了
    Tree 通过父id找所有子节点
    SqlSugar CURD
    什么是.NET Framwork
  • 原文地址:https://www.cnblogs.com/dayin1/p/12065823.html
Copyright © 2011-2022 走看看