解决 spring+springMVC+mybatis整合，百度富文本编辑器Ueditor，图文上传、重启Tomcat上传的图片消失问题！

        首先，小编也是刚学java一个多月，自己看百度上面的教程，整合了spring+springmvc+mybatis，自己做一个小小的项目。刚好自己需要做一个添加文章功能，就需要使用到ueditor富文本编辑器。考虑到写文章会结合图片，所以就记录一下，使用富文本编辑器过程！

接下来，看看最后的效果图！

 Ueditor官方给出的安装文档：http://fex.baidu.com/ueditor/#server-jsp

1、在项目下的pom.xml中添加以下jar包！

 <!-- 
        百度富文本编辑器
        https://search.maven.org/artifact/cn.songxinqiang/com.baidu.ueditor/1.1.2-offical/jar 
    -->
    <dependency>
      <groupId>cn.songxinqiang</groupId>
      <artifactId>com.baidu.ueditor</artifactId>
      <version>1.1.2-offical</version>
    </dependency>

2、下载ueditor富文本编辑器（java 下载jsp版本），如果版本错了，在上传图片会报错,下图错误！

      

3、Ueditor富文本编辑器，下载地址：https://ueditor.baidu.com/website/download.html

4、将下载后的ueditor富文本编辑器解压，有如下文件

5、将其改名后，把整个文件夹copy到webapp根目录下（下面的4个步骤不能少，必须重新发布，最好是在第10步之后）

6、复制后，config.json文件会有红叉，解决办法：

      Window > Preferences > Eclipse > 搜索Validation > 右侧将“JSON Validator”关闭即可！

      

7、测试Ueditor是否安装正确，在浏览器中输入：

      http://localhost:8080/项目名称/ueditor/jsp/controller.jsp?action=config

看到下图所示，表示已经安装成功了！

然后再次验证，在浏览器中输入：http://localhost:8080/myblog/ueditor/index.html（index.html是实例）

这就说明ueditor已经安装好了，接下来就该是修改配置了

8、修改配置信息，找到ueditor/jsp/config.json文件，图片访问路径改为项目启动后访问浏览器的路径，如果路径填错，就会报错：IO错误

     "imageUrlPrefix":"http://localhost:8080/项目名称", /* 图片访问路径前缀 */

8、在jsp文件中，引用ueditor富文本编辑器的js文件

<script src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> 
<script src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script> 
<script src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>

9、在jsp页面，初始化Ueditor编辑器

<script type="text/javascript">
    UE.getEditor('myeditor',{initialFrameHeight:600,initialFrameWidth:560})
</script>

10、在jsp页面显示Ueditor富文本编辑器的2种方式，任选其一

方式一：

显示Ueditor部分：

<form name="upfile" id="upfile">
      <textarea name="content" id="myeditor">显示Ueditor</textarea>
</form>

JS部分：

<script type="text/javascript">

       UE.getEditor('myeditor',{initialFrameHeight:600,initialFrameWidth:560})       

       $(function(){
             //初始化下拉框
             initSelect();
             //初始化富文本
             initUedit();
      })
    //初始化Uedit
    function initUedit(){
        var ue = UE.getEditor('content_ue',{
            toolbars: [[
                'simpleupload', //单图上传
                'insertimage'//多图上传
            ]],
            zIndex : 9010,
            initialFrameWidth : 780,
            initialFrameHeight: 300
        });

        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage') {
                return '/ueditor/uploadImage';
            } else if(action == 'listimage') {
                return '/ueditor/listimage';
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }
    }

</script>

方式二：

显示Ueditor部分：

<div class="add-article-box">
        <h2 class="add-article-box-title"><span>内容</span></h2>
        <div class="add-article-box-content">
             <script id="article-content" name="content" type="text/plain"></script>
             <span class="prompt-text">内容，用于展示个人技能。</span>
        </div>
</div>

JS部分：

<script type="text/javascript">
    var editor = UE.getEditor('article-content');
    window.οnresize=function(){
        window.location.reload();
    }
    var _uploadEditor;
    $(function () {
        //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
        _uploadEditor = UE.getEditor('uploadEditor');
        _uploadEditor.ready(function () {
            //设置编辑器不可用
            //_uploadEditor.setDisabled();
            //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
            _uploadEditor.hide();
            //侦听图片上传
            _uploadEditor.addListener('beforeInsertImage', function (t, arg) {
                //将地址赋值给相应的input,只去第一张图片的路径
                $("#pictureUpload").attr("value", arg[0].src);
                //图片预览
                //$("#imgPreview").attr("src", arg[0].src);
            })
            //侦听文件上传，取上传文件列表中第一个上传的文件的路径
            _uploadEditor.addListener('afterUpfile', function (t, arg) {
                $("#fileUpload").attr("value", _uploadEditor.options.filePath + arg[0].url);
            })
        });
    });
    //弹出图片上传的对话框
    $('#upImage').click(function () {
        var myImage = _uploadEditor.getDialog("insertimage");
        myImage.open();
    });
    //弹出文件上传的对话框
    function upFiles() {
        var myFiles = _uploadEditor.getDialog("attachment");
        myFiles.open();
    }
</script>

重点：在第5步中的截图中，有4个步骤，在第10步完成后执行！

    (1)、maven clean

    (2)、Project  --> Clean

    (3)、maven install

    (4)、重新将项目发布到Tomcat服务器上

11、我们写一下后端代码！

 （1）、在SkillsMapping.xml文件中，写SQL语句

（2）、dao层SkillsMapper.java文件中的代码如下

（3）、在Service接口 ISkillsService.java文件中代码

(4)、在Service接口实现类 SkillsServiceImpl.java文件中，代码如下

（5）、在控制器 SkillsController.java文件中代码

代码写的low，毕竟小编也是才学一个月，但是功能还是实现了！

12、以上步骤完成后，我们去找一找这个上传的图片，共计3张！

就这样，原本以为就这样完成了图文上传功能，但是发现了一个非常严重的问题！

1、产生原因：

        当我们上传的图片存放在临时文件中,过段时间就会被删除,导致无法显示,比如tomcat重启,怎么解决这个问题呢？

2、解决办法：

       (1)、移除在Eclipse中发布的项目；

       (2)、maven  clean；

       (3)、Project  clean；

       (4)、maven install；

     (5)、重头戏来了！

       首先、点击Eclipse下方的服务器 -> 右键 -> clean;

      

       其次 ，双击服务器，会打开以下界面，将 Server Locations 下的 Deploy path: D:\Tomcat7.0\wtpwebapps 改为：

Deploy path: D:\Tomcat7.0 webapps，或者说选到非Tomcat软件路径下就行！

展示一下我的项目路径、上传的图片路径及数据库中存的图片！

 

        最后，重新发布项目、测试，你会发现这个图片就不会出现消失不见的情况，希望我填的这个坑，能帮到大家！