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 如有更好可以给我链接谢谢

?

此时上传展示待回显全部完成

百度富文本编辑器实现以及上传图片