在springmvc中使用Ueditor

時間 2020-06-05

標籤 springmvc 使用 ueditor 欄目 Spring 简体版

原文原文鏈接

Ueditor下載地址：javascript

http://ueditor.baidu.com/website/download.htmlcss

下載後直接解壓縮。我主要實現文件上傳和form表單提交數據。
html

1、配置文件修改 java

uedit.config.jsweb

var URL = window.UEDITOR_HOME_URL; //主要是本地ueditor文件目錄json

serverUrl: URL + "jsp/config.jhtml" // 服務器統一請求接口路徑服務器

conf.json閉包

"p_w_picpathUrlPrefix": "http://localhost:8080/fetchbaike/ueditor/jsp/upload/", /* 圖片訪問路徑前綴 */app

二、頁面修改jsp

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.all.min.js"> </script>
    <!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
    <!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
 <script type="text/javascript" charset="utf-8" src="./ueditor/lang/zh-cn/zh-cn.js"></script>
tyle type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>

<form id="form"  method="post" action="./textarea.jhtml">
        <input type="text" name="goodsname" value="goodsname"  />
        <script type="text/plain" id="myEditor" name="myEditor">
          <p>歡迎使用UEditor！</p>
     </script>
        <input type="submit" value="提交"/>
</form>

<!-- editor的初始化 -->
<script type="text/javascript">

    //實例化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
   
    var editor_a = UE.getEditor('myEditor',{ 
    initialFrameWidth : 400,
       initialFrameHeight: 300});
    
   
   <!--用於上傳文件跳轉到controller-->
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    
    UE.Editor.prototype.getActionUrl = function(action) {
  
        if (action == 'uploadp_w_picpath' || action == 'uploadscrawl' || action == 'uploadp_w_picpath'
                || action == 'uploadvideo' || action == 'uploadfile') {
            return './ueditor/uploadp_w_picpath.jhtml';
        }else {
            return this._bkGetActionUrl.call(this, action);
        }
    }
    
</script>
</body>

3、後臺操做

@Controller
@RequestMapping(value="/ueditor")
public class UeditorController {

@RequestMapping(value="/jsp/config")
public void config(HttpServletRequest request,HttpServletResponse response,String action) throws Exception {
   
    request.setCharacterEncoding("utf-8");
    response.setHeader("Content-Type", "text/html");
    String rootPath=request.getSession().getServletContext().getRealPath("/");
    //會加載conf.json文件，注意路徑問題
    response.getWriter().write(new ActionEnter(request,rootPath).exec());
}

@RequestMapping(value="/uploadp_w_picpath")
@ResponseBody
public Map<String,Object> uploadp_w_picpath(@RequestParam("upfile") MultipartFile[] multipartFiles,  HttpServletRequest request,HttpServletResponse response) throws Exception {
    Map<String,Object> map=new HashMap<String,Object>();
    String path=request.getSession().getServletContext().getRealPath("/ueditor/jsp/upload/");
    System.out.println("path++"+path);
    if(multipartFiles!=null && multipartFiles.length>0){
        //循環遍歷
        for (MultipartFile multipartFile : multipartFiles) {
        
            //原來圖片的名稱
            String OriginalFilename=multipartFile.getOriginalFilename();
            
            //得到圖片新名稱
            String newFileName=getFileNewName(OriginalFilename.substring(OriginalFilename.lastIndexOf(".")));
           
            //建立文件
            File targetFile=new File(path,newFileName);
            if(!targetFile.exists()){
                targetFile.mkdirs();
            }
            String state="SUCCESS";
            try {
                multipartFile.transferTo(targetFile);
                map.put("original", OriginalFilename);
                map.put("name",newFileName);
                //注意url會和conf.json中的路徑配合找到圖片
                map.put("url", newFileName);
                map.put("state", "SUCCESS");
            } catch (Exception e) {
            state="FAIL";
            }
        }
    }
    return map;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。