简单的在项目中整合UEditor上传图片文件

       因为最近项目收到一个需要添加帮助中心的需求，帮助中心需要能支持富文本编辑，上传图片，多图，视频等等，原先项目中使用的是CKeditor,在使用中多图上传和视频上传似乎存在一定的问题，搜寻答案无果，就决定跟换富文本编辑器，对比几个富文本编辑器觉得百度的UEditor挺不错的，蛮符合要求，界面也还可以，就决定是它了，开干。

准备部分

搜索UEditor官方网址 https://ueditor.baidu.com/website/download.html，点开开发版进去下载；由于我是java ,springMVC项目，前端界面是jsp,所以选择1.4.3.3 Jsp 版本 下载，注意最好选择UTF-8版本，不然编写中文可能会出现乱码，也下载了一份UEditor的源码；也可以选择mini版下载，选择mini版要注意在界面上调用的语句会有所不同。

下载下来是一个压缩版，找个路径解压，

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

解压后的路径和文件 ueditor-1.4.3.3\jsp\src\com\baidu\ueditor

ueditor-1.4.3.3(utf-8 jsp)

java后台部分

 1.config.json文件

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

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

# 部分引用：https://www.cnblogs.com/libo0125ok/p/8127049.html 这个博主的内容

 

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

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

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

 

3、前端部分

1.demo目录结构

 

在ueditor-demo目录下新建lib目录，然后从之前解压的jsp版本中，把dialogs、lang、themes、third-party四个文件夹和ueditor.all.min.js、ueditor.config.js、ueditor.parse.js、ueditor.parse.min.js四个js文件复制到lib目录下，并添加jQuery(用来执行ajax提交数据)

如果只是要做到把富文本保存的数据库，图片，视频，附件保存到项目，那么到这一步就已经可以实现了，文件的保存路径取自config.json文件中的“imagePathFormat”属性值，保存在项目部署的子路径下；

 

如果上传后图片没有回显，在页面控制台里面查看图片路径，显示图片上传路径找不到，这时候我们就要到ueditor的后端配置文件中进行配置了。我们先看config.json文件，只看部分配置，下面的配置都很重要，但我们先解决上面出现的问题：上面的问题应该是图片的路径不对造成的，所以我们修改配置：imageUrlPrefix，这个是图片的访问路径前缀的意思，在config.json文件中，配置"imageUrlPrefix": "/项目名称", /* 图片访问路径前缀 */  配置上当前项目的名称即可。

不过把图片文件等存放在项目下会有个问题，一旦项目重启，里面文件夹里保存的文件就会消失变成空的，为了解决这个方法应该需要把文件存放到非项目路径的位置，例如其他的盘的文件夹里，也可使用FTP将文件上传到文件服务器做保存，这样就可以完美解决项目重启文件丢失的问题，这里篇幅太长就不详细介绍，在后续的文章中会将这两种解决方案都一 一实现。