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

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

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

百度富文本编辑jsp上传_百度富文本编辑器教程，从入门到放弃
原标题:百度富文本编辑器教程,从入门到放弃百度UEditor 资源与项目分离-完全教程夏老师人真好又求到一篇技术贴来来来继续掏出小本本什么是百度UEditor? 百度UEditor是一款富 ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
UEditor 百度富文本编辑器 .Net实例
转自 http://download.csdn.net/download/hdsslxl/6740605 1.UEditor 百度富文本编辑器完整版 .Net实例已解决上传图片问题. 2.内附完整d ...
如何部署JSP版本的百度富文本编辑器（带图片上传功能）
博主之前因为公司项目需要部署百度的富文本编辑器到项目中,由于之前一直是后端开发,所以部署上还是费了一番心思的,网上也有很多教程但是用起来总会有各种问题,今天在这里记录一下以备今后的不时之需,也希望帮助 ...
html 组件化编辑器,vue.js组件化使用百度富文本编辑器（一）
注意: 本文采用的编辑器为:idea 1.下载百度富文本编辑器,地址:https://ueditor.baidu.com/website/download.html#ueditor 2.加入到stat ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
vue使用百度富文本编辑器（ueditor）
文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...

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

接下来是上传图片的步骤以及配置

我想没有比我更加详细的富文本上传以及配置了吧 1.5.0 如有更好可以给我链接谢谢

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

最新文章

热门文章