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应用

最新文章

热门文章