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

时间:2024-03-04 11:00:26

百度富文本编辑器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();
        }
    }
View Code

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

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

    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径,这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        //, serverUrl: URL + "php/controller.php"
        , serverUrl: "index/upload/type"
View Code