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();
        }
    }
View Code

由於百度富文本編輯是使用了統一接口,所以只能按照它的要求來了

在config.js里的找到服務器統一請求接口路徑(如下),需要貼上自己的接口,然后就可以用了

    window.UEDITOR_CONFIG = {

        //為編輯器實例添加一個路徑,這個不能被注釋
        UEDITOR_HOME_URL: URL

        // 服務器統一請求接口路徑
        //, serverUrl: URL + "php/controller.php"
        , serverUrl: "index/upload/type"
View Code

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM