百度富文本編輯器實現以及上傳圖片

1百度富文本關於整合java使用   版本1.4.3 UEditor  jsp版本

下載地址:https://github.com/fex-team/ueditor      jsp 與php版本 

先解壓放入項目中​​​

將jar包或依賴導入項目中

<div class="form-group">
   <label class="col-sm-3 control-label">新聞正文：</label>
   <div class="col-sm-8">
   <script type="text/plain"   id="editor" style="margin-bottom:100%;width: 100%"  ></script>
   </div>
   <input id="content" name="content" th:field="*{content}" type="hidden">
</div>

​

​

先說這段代碼引入js    以及富文本初始化,   隱藏的hidden域是提交時將富文本的值賦予content字段

var ue = UE.getEditor('editor');
//建議使用工廠方法getEditor創建和引用編輯器實例，
//如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
$(function(){
   ue.addListener("ready",function () {
      ue.setContent($("#content").val(),false)
   })
});

​

修改時做回顯將hidden中的值回顯到富文本中  注意順序問題

​

 

$("#content").val(UE.getEditor('editor').getContent());  提交時將富文本中的內容賦值入應有的字段中   以上就是富文本基本配置與回顯   有一個問題就是在提交時如果 validate.js 與富文本同事使用會報錯 這個問題只有解決

 

 

接下來是上傳圖片的步驟以及配置

1由於controller.jsp中報錯我使用 java代替jsp

​

圖中是上傳自定義路徑對應后台上傳方法   ip+端口+上傳路徑

 

1這里配置的是服務器統一接口

​

var server_url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port

controller.jsp如果不能使用報錯  ,用我這段代碼指向對應的java配置文件controller.java

 

@RequestMapping(value = "/config")
public void config(HttpServletRequest request, HttpServletResponse response) throws Exception {
        response.setContentType("application/json");
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/ueditor/jsp";
        try {
            response.setCharacterEncoding("UTF-8");
            String exec = new ActionEnter(request, rootPath).exec();
            System.out.println(exec);
            PrintWriter writer = response.getWriter();
            writer.write(new ActionEnter(request, rootPath).exec());
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
}

​

​

 

/**
 * @upfile 為config.json 文件配置必須一致
 * @MultipartFile
 * */
@ResponseBody
@RequestMapping("/uploadImages")
public JSONObject uploadImages(@RequestParam(value =("upfile"), required = false) MultipartFile file,
                               HttpServletResponse response, HttpServletRequest request) throws Exception{
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    JSONObject json = new JSONObject();
    try {
        /**
         * 1截取文件名換替換uuid 防止同樣的
         * @root 路徑為指定文件夾下的目錄  配置前綴在config.json中配置
         * @json 返回的json 格式   json格式返回錯誤會將Baidu富文本中的內容不回顯內容消失 但是會上傳成功   
         * */
        String fileName = file.getOriginalFilename();
        String str =fileName.substring(fileName.indexOf("."));
        UUID uuid = UUID.randomUUID();
        String root ="/lcReportCover/"+uuid+str;
        OssUtils.lcReportCover( uuid+str, file.getInputStream(),"/whd");
        json.put("state","SUCCESS");
        json.put("title", fileName);
        json.put("size", "");
        json.put("url",root);
        json.put("original", file.getName());
        System.out.println(JSONObject.toJSON(json));
    }catch (Exception e){
        json.put("state","上傳圖片出錯");
    }
    return json;
}

​

這是后台的上傳方法以及路徑上傳完成之后相應富文本顯示並上傳成功

我想沒有比我更加詳細的富文本上傳以及配置了吧   1.5.0 如有更好可以給我鏈接謝謝

​

 

此時上傳展示待回顯全部完成