thinkphp5.1中适配百度富文本编辑器ueditor

百度富文本编辑器ueditor虽然很老，但是功能齐全，我近期需要能批量粘贴图片的功能，但是找不到，很无奈。然后现在就分享一下如何把ueditor适配到thinkphp5.1，有知道如何批量上传图片的艾特我啊，谢谢分享

首先，下载百度编辑包，然后打开你的thinkPHP项目，添加以下代码

public function config()

    {

        $config = [

            /* 前后端通信相关的配置,注释只允许使用多行方式 */

            /* 上传图片配置项 */

            "imageActionName" => "uploadimage", /* 执行上传图片的action名称 */

            "imageFieldName" => "upfile", /* 提交的图片表单名称 */

            "imageMaxSize" => 2048000, /* 上传大小限制，单位B */

            "imageAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */

            "imageCompressEnable" => true, /* 是否压缩图片,默认是true */

            "imageCompressBorder" => 1600, /* 图片压缩最长边限制 */

            "imageInsertAlign" => "none", /* 插入的图片浮动方式 */

            "imageUrlPrefix" => "", /* 图片访问路径前缀 */

            "imagePathFormat" => "index/uplod/saveimg/image/{yyyy}{mm}{dd}/{time}{rand=>6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

            /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */

            /* {rand=>6} 会替换成随机数,后面的数字是随机数的位数 */

            /* {time} 会替换成时间戳 */

            /* {yyyy} 会替换成四位年份 */

            /* {yy} 会替换成两位年份 */

            /* {mm} 会替换成两位月份 */

            /* {dd} 会替换成两位日期 */

            /* {hh} 会替换成两位小时 */

            /* {ii} 会替换成两位分钟 */

            /* {ss} 会替换成两位秒 */

            /* 非法字符 \ => * ? " < > | */

            /* 具请体看线上文档=> fex.baidu.com/ueditor/#use-format_upload_filename */

            /* 涂鸦图片上传配置项 */

            "scrawlActionName" => "uploadscrawl", /* 执行上传涂鸦的action名称 */

            "scrawlFieldName" => "upfile", /* 提交的图片表单名称 */

            "scrawlPathFormat" => "index/uplod/saveimg/image/{yyyy}{mm}{dd}/{time}{rand=>6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

            "scrawlMaxSize" => 2048000, /* 上传大小限制，单位B */

            "scrawlUrlPrefix" => "", /* 图片访问路径前缀 */

            "scrawlInsertAlign" => "none",

            /* 截图工具上传 */

            "snapscreenActionName" => "uploadimage", /* 执行上传截图的action名称 */

            "snapscreenPathFormat" => "/index/uplod/saveimg/image/{yyyy}{mm}{dd}/{time}{rand=>6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

            "snapscreenUrlPrefix" => "", /* 图片访问路径前缀 */

            "snapscreenInsertAlign" => "none", /* 插入的图片浮动方式 */

            /* 抓取远程图片配置 */

            "catcherLocalDomain" => ["127.0.0.1", "localhost", "img.baidu.com"],

            "catcherActionName" => "catchimage", /* 执行抓取远程图片的action名称 */

            "catcherFieldName" => "source", /* 提交的图片列表表单名称 */

            "catcherPathFormat" => "index/uplod/saveimg/image/{yyyy}{mm}{dd}/{time}{rand=>6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

            "catcherUrlPrefix" => "", /* 图片访问路径前缀 */

            "catcherMaxSize" => 2048000, /* 上传大小限制，单位B */

            "catcherAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */

            /* 上传视频配置 */

            "videoActionName" => "uploadvideo", /* 执行上传视频的action名称 */

            "videoFieldName" => "upfile", /* 提交的视频表单名称 */

            "videoPathFormat" => "index/uplod/saveimg/video/{yyyy}{mm}{dd}/{time}{rand=>6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

            "videoUrlPrefix" => "", /* 视频访问路径前缀 */

            "videoMaxSize" => 102400000, /* 上传大小限制，单位B，默认100MB */

            "videoAllowFiles" => [

                ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",

                ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"

            ], /* 上传视频格式显示 */

            /* 上传文件配置 */

            "fileActionName" => "uploadfile", /* controller里,执行上传视频的action名称 */

            "fileFieldName" => "upfile", /* 提交的文件表单名称 */

            "filePathFormat" => "index/uplod/saveimg/file/{yyyy}{mm}{dd}/{time}{rand=>6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

            "fileUrlPrefix" => "", /* 文件访问路径前缀 */

            "fileMaxSize" => 51200000, /* 上传大小限制，单位B，默认50MB */

            "fileAllowFiles" => [

                ".png", ".jpg", ".jpeg", ".gif", ".bmp",

                ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",

                ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",

                ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",

                ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"

            ], /* 上传文件格式显示 */

            /* 列出指定目录下的图片 */

            "imageManagerActionName" => "listimage", /* 执行图片管理的action名称 */

            "imageManagerListPath" => "index/uplod/saveimg/image/", /* 指定要列出图片的目录 */

            "imageManagerListSize" => 20, /* 每次列出文件数量 */

            "imageManagerUrlPrefix" => "", /* 图片访问路径前缀 */

            "imageManagerInsertAlign" => "none", /* 插入的图片浮动方式 */

            "imageManagerAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

            /* 列出指定目录下的文件 */

            "fileManagerActionName" => "listfile", /* 执行文件管理的action名称 */

            "fileManagerListPath" => "index/uplod/saveimg/file/", /* 指定要列出文件的目录 */

            "fileManagerUrlPrefix" => "", /* 文件访问路径前缀 */

            "fileManagerListSize" => 20, /* 每次列出文件数量 */

            "fileManagerAllowFiles" => [

                ".png", ".jpg", ".jpeg", ".gif", ".bmp",

                ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",

                ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",

                ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",

                ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"

            ] /* 列出的文件类型 */

        ];

        return $config;

    }

    public function type($action)

    {

        switch ($action) {

            case $action == 'config':

                return json($this->config());

                break;

            case $action == 'uploadimage':

                return $this->saveimg();

                break;

        }

    }

    public function saveimg()

    {

        // 获取表单上传文件 例如上传了001.jpg

        $file = request()->file('upfile');

        // 移动到框架应用根目录/uploads/ 目录下

        $info = $file->move('./uploads');

        if ($info) {

            // 成功上传后 获取上传信息

            // 输出 jpg

            //echo $info->getExtension();

            // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg

            //echo $info->getSaveName();

            // 输出 42a79759f284b767dfcb2a0197904287.jpg

            //echo $info->getFilename();

            //{"state":"SUCCESS","url":"\/ueditor\/php\/upload\/image\/20200718\/1595038252945471.png","title":"1595038252945471.png","original":"\u56fe\u7247.png","type":".png","size":5851}

            $saveinfo=[

                'state'     =>  "SUCCESS",

                'url'       =>  '/uploads/'.$info->getSaveName(),

                'title'     =>  '',

                'originl'   =>  '图片.png',

                "type"      =>  ".png",

                "size"      =>  5851

            ];

            return json($saveinfo);

        } else {

            // 上传失败获取错误信息

            echo $file->getError();

        }

    }

由于百度富文本编辑是使用了统一接口，所以只能按照它的要求来了

在config.js里的找到服务器统一请求接口路径（如下），需要贴上自己的接口，然后就可以用了

    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释

        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径

        //, serverUrl: URL + "php/controller.php"

        , serverUrl: "index/upload/type"

巴特西

thinkphp5.1中适配百度富文本编辑器ueditor

最新文章

热门文章