ueditor編輯器整合fastdfs文件服務器上傳

下載地址：demo下載
一、前期準備工作
1丶基本需求
1，實現文件上傳
2,項目目錄結構

下載地址：demo下載

二、實現步驟
首先去官網下載源文件將以下文件導入自己的項目

按照教程你需要訪問index.html

這裏的index.html其實這個index.html的作用也是獲取同目錄下的json文件來讀取配置
所以導致你獲取不到config.json
由於要用到文件上傳需要導入jar包放在WEB_INF的lib目錄下就行然後右鍵項目buildpath一下
我這裏用maven

百度ueditor maven可能會找不到可以自己把jar放到本地倉庫我是直接放到公司maven私服上代替config.json文件跟config.json一樣但是換成了java

package com.ueditor.util;
 
public class PublicMsg {
    public final static String UEDITOR_CONFIG = "{\n" +
               "    \"imageActionName\": \"uploadimage\",\n" +
               "    \"imageFieldName\": \"upfile\",\n" +
               "    \"imageMaxSize\": 2048000,\n" +
               "    \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
               "    \"imageCompressEnable\": true,\n" +
               "    \"imageCompressBorder\": 1600,\n" +
               "    \"imageInsertAlign\": \"none\",\n" +
               "    \"imageUrlPrefix\": \"\",\n" +
               "    \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
               "\n" +
               "    \"scrawlActionName\": \"uploadscrawl\",\n" +
               "    \"scrawlFieldName\": \"upfile\",\n" +
               "    \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
               "    \"scrawlMaxSize\": 2048000,\n" +
               "    \"scrawlUrlPrefix\": \"\",\n" +
               "    \"scrawlInsertAlign\": \"none\",\n" +
               "\n" +
               "    \"snapscreenActionName\": \"uploadimage\",\n" +
               "    \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
               "    \"snapscreenUrlPrefix\": \"\",\n" +
               "    \"snapscreenInsertAlign\": \"none\",\n" +
               "\n" +
               "    \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
               "    \"catcherActionName\": \"catchimage\",\n" +
               "    \"catcherFieldName\": \"source\",\n" +
               "    \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
               "    \"catcherUrlPrefix\": \"\",\n" +
               "    \"catcherMaxSize\": 2048000,\n" +
               "    \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
               "\n" +
               "    \"videoActionName\": \"uploadvideo\",\n" +
               "    \"videoFieldName\": \"upfile\",\n" +
               "    \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
               "    \"videoUrlPrefix\": \"\",\n" +
               "    \"videoMaxSize\": 102400000,\n" +
               "    \"videoAllowFiles\": [\n" +
               "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
               "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"],\n" +
               "\n" +
               "    \"fileActionName\": \"uploadfile\",\n" +
               "    \"fileFieldName\": \"upfile\",\n" +
               "    \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
               "    \"fileUrlPrefix\": \"\",\n" +
               "    \"fileMaxSize\": 51200000,\n" +
               "    \"fileAllowFiles\": [\n" +
               "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
               "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
               "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
               "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
               "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
               "    ],\n" +
               "\n" +
               "    \"imageManagerActionName\": \"listimage\",\n" +
               "    \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
               "    \"imageManagerListSize\": 20,\n" +
               "    \"imageManagerUrlPrefix\": \"\",\n" +
               "    \"imageManagerInsertAlign\": \"none\",\n" +
               "    \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
               "\n" +
               "    \"fileManagerActionName\": \"listfile\",\n" +
               "    \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
               "    \"fileManagerUrlPrefix\": \"\",\n" +
               "    \"fileManagerListSize\": 20,\n" +
               "    \"fileManagerAllowFiles\": [\n" +
               "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
               "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
               "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
               "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
               "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
               "    ] \n" +
               "\n" +
               "}";
       /**
        * Ueditor的返回狀態類型
        */
       public enum UeditorMsg{
           SUCCESS("SUCCESS"),ERROR("上傳失敗");
           private String v;
           UeditorMsg(String v){
               this.v =v;
           }
           public String get(){
               return this.v;
           }
       }
}

3.修改ueditor.config.js裏的配置

Contorller接收改路徑剛開始會請求你要是攔截路徑會看到xxx/controller.jsp?action=config
等於初始化的時候會先請求action=config
這時候我們直接把java的代替config.json配置返回回去
注意一下這裏自定義了文件路徑，本文用Vo需要返回JSON 這是支持二次開發的文檔上寫的返回json格式

//{state：”數據狀態信息”，url：”圖片回顯路徑”，title：”文件title”，original：”文件名稱”，···}

package com.ueditor.conterller;
 
 
import com.google.common.collect.Maps;
import com.ueditor.util.FastDFSClientWrapper;
import com.ueditor.util.PublicMsg;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
 
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.Map;
 
@Controller
@RequestMapping("UeditorController")
public class UeditorController {
 
   @Autowired
   private FastDFSClientWrapper fastDFSClientWrapper;
 
 
 
   @RequestMapping("/index")
       private String showPage(){
           return "index";
       }
 
      @RequestMapping(value="/ueditor")
       @ResponseBody
       public String ueditor(HttpServletRequest request) {
 
           return PublicMsg.UEDITOR_CONFIG;
       }
 
       @RequestMapping(value="/imgUpload")
       @ResponseBody
       public Map  imgUpload(MultipartFile upfile) throws IOException {
 
         byte[] bytes = upfile.getBytes();
         String originalFileName = upfile.getOriginalFilename();
         String extension = originalFileName.substring(originalFileName.lastIndexOf(".") + 1);
         String fileName = upfile.getName();
         long fileSize = upfile.getSize();
         System.out.println(originalFileName + "==========" + fileName + "===========" + fileSize + "===============" + extension + "====" + bytes.length);
         String url= "http://4.105.159.213/"+fastDFSClientWrapper.uploadFile(bytes, fileSize, extension);
          
         String fileId ="ces";
 
         return resultMap("SUCCESS",url,fileSize,fileId,fileName,extension);
       }
 
       private Map<String,Object> resultMap(String state,String url,long size,String title,String original,String type){
           Map<String ,Object> result = Maps.newHashMap();
           result.put("state",state);
           result.put("original",original);
           result.put("size",size);
           result.put("title",title);
           result.put("type",type);
           result.put("url", url);
           return result;
       }
 
}

頁面引入js

<script type="text/javascript" charset="utf-8" src="http://localhost:8081/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="http://localhost:8081/ueditor.all.js"> </script><!--建議手動加在語言，避免在ie下有時因爲加載語言失敗導致編輯器加載失敗--><!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，比如你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文--><script type="text/javascript" charset="utf-8" src="http://localhost:8081/lang/zh-cn/zh-cn.js"></script>

初始化編輯器和內容

 <!-- 實例化編輯器 -->
<script type="text/javascript">
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
                return 'http://localhost:8081/UeditorController/imgUpload';
                //'http://localhost:8080/imgUpload';爲方法imgUpload的訪問地址
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }
</script>

三、運行效果

五、補充
整個功能已經出來了下面可以安裝FastDFS由於內容太不寫出來了我這裏提供一個安裝FastDFS地址按照這地址可以搭建文件服務器的
後臺FastDFS上傳代碼也整合在代碼裏的安裝好FastDFS可以直接上傳了
https://www.cnblogs.com/yufeng218/p/8111961.html
下載地址：demo下載

ueditor編輯器整合fastdfs文件服務器上傳

ueditor編輯器整合fastdfs文件服務器上傳

java公衆號獲取用戶信息

JWT token權限驗證

Centos安裝 FastDFS+ngixn

百度富文本編輯器整合fastdfs文件服務器上傳

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結