现在位置首页 / 项目实战 /正文

前后端分离ueditor富文本编辑器的使用-Java版本(1)

作者: IT小兵 | 2017年12月28日| 热度:℃ | 评论: |参与:

最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多java版本的资料,不过大部分都是前后端都在一个工程项目下,页面是jsp的。由于我这个系统是把前后端拆分开成前后端分离的。所以在根据看了网上的资料以及慢慢的摸索下,实现了在前后端分离的情况下把ueditor集成到系统中。项目页面如图:

 

说明:由于ueditor的上传文件的功能默认是上传在项目工程目录下的,而我这里是把文件上传到另外一个Tomcat服务器下的,所以我自己单独写了一个上传接口,并且还要修改config.json文件。 

 

现在为了记录ueditor的使用,我在这里把前端部分有关ueditor这一块单独拿出来,写了一个简单的小demo,下面记录过程,如有不足之处,敬请提出。

1、下载ueditor

打开http://ueditor.baidu.com/website/download.html#ueditor

需要下载两个压缩包

1、下载完整源码,并解压

2、下载jsp版本【UTF-8】,并解压

   源码版本是为了使用里面的java文件,而后来发现在源码版本中没有ueditor.all.min.js文件,而在前端是需要引入这个js文件的,所以需要再把jsp版本下载下来,该版本中有该js文件。

       

 

2、java后台部分

 2.1、config.json文件

在java项目的 src/main/webapp 目录下新建一个conf目录,然后在解压后的源码版本中的 jsp 目录下找到config.json文件,把它复制到新建的conf目录下,并做修改。

该文件是用来配置ueditor编辑器的上传文件的功能的各种参数的。

 

其中,imageActionName属性的取值“uploadimage”要记住,后续上传接口中要用到

 

2.2、把源码版本中的 jsp/src/com 目录下的 baidu 这个文件夹拷贝到项目com.lin包下

  拷贝后,里面java文件肯定会报错,只需修改各个java文件的package包路径和引用其他文件的路径即可。

 

 另外由于在上一步中,把config.json文件放置到了src/main/webapp/conf目录下,而在ConfigManager类中需要读取该json文件的内容,所以需要在ConfigManager.java文件中修改少量代码,大于在170多行,修改如下:




参考:


[java+Spring+Ueditor实现图片上传功能]

[百度编辑器ueditor最新版asp.net部署使用说明]

[ueditor+php配置七牛上传图片]

[php版的UEditor 1.3.x图片上传目录的设置,与上传插件的修改]

[为百度UEDITOR编辑器上传图片添加水印]

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询