springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传

项目中需要使用到富文本编辑器，找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入。编辑器官网是：http://ueditor.baidu.com/website/index.html ，开发文档和js包可以从这里找到。

下面开始介绍开发过程：

引入富文本编辑器UEditor

编辑器js文件引入的静态目录

将所有下载好的js包（官方有jsp、php等几个版本的包，我下载的是jsp的）放入resources目录下的static下，我在里面建立了个js目录，下面又搞了个ueditor包用于存放所有编辑器js。
页面中引入编辑器
<div class="form-group">
<label for="title" class="col-md-2 control-label">新闻详情</label>
<div class="col-md-10" style="width: 100%;">
<script id="editor" name="detailContent" type="text/plain" style="width:100;height:500px;"></script>
</div>
</div>

引入相关js文件：

<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.js"></script>

其中/js/ueditor/ueditor.js是我根据官方demo中封装的一些方法，方便使用而已，可有可无。

测试打开页面应该已经有了编辑器展示了。

编辑器配置文件修改
为了后续可以上传等与后台交互的操作，需要修改下统一配置文件，就是刚引入的ueditor.config.js,
我这里主要改动了两个地方：
a. 服务器地址
b. 工具项配置
如下：

    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        // , serverUrl: URL + "jsp/controller.jsp"
        , serverUrl: "http://localhost:8081/admin/imgUpload2"
        //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
        , toolbars: [[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough',  'removeformat', 'formatmatch', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'simpleupload', 'insertimage',  'insertvideo', 'music', 'attachment', 'map', '|',
            'horizontal', 'date', 'time',  '|',
            'print', 'preview', 'searchreplace'
        ]]

其中serverUrl是服务器地址，这个地址要是错误，会使得本地图片上传的地方无法使用。而该方法返回的是一组JSON格式的配置。我参照着原来jsp例子中的结果直接返了个JSON：

@RequestMapping(value = "/imgUpload2")
    @ResponseBody
    public String imgUpload(HttpServletRequest request) {
        String config = "{\n" +
                "videoMaxSize: 102400000,\n" +
                "videoActionName: \"uploadvideo\",\n" +
                "fileActionName: \"uploadfile\",\n" +
                "fileManagerListPath: \"/ueditor/jsp/upload/file/\",\n" +
                "imageCompressBorder: 1600,\n" +
                "imageManagerAllowFiles: [\n" +
                "\".png\",\n" +
                "\".jpg\",\n" +
                "\".jpeg\",\n" +
                "\".gif\",\n" +
                "\".bmp\"\n" +
                "],\n" +
                "imageManagerListPath: \"/ueditor/jsp/upload/image/\",\n" +
                "fileMaxSize: 51200000,\n" +
                "fileManagerAllowFiles: [\n" +
                "\".png\",\n" +
                ...
                ...

json具体参见引入的jsp包下的config.json,原样返回即可。
有了这个接口，当我们点击本地图片上传控件时，应该就可以弹出文件选择器，选择本地图片了。但是此时选好图片后，文件实际是上传不了的，因为我们还得重新写一个我们自己的图片上传接口。

图片上传接口及设置
图片上传接口代码：

    @RequestMapping(value = "/imgUpload3")
    @ResponseBody
    public String imgUpload3(MultipartFile upfile) {
        String path = this.imgUpload(upfile).getData();
                String config =
                "{\n" +
                "            \"state\": \"SUCCESS\",\n" +
                "                \"url\": \"http://localhost:8081/upload/"+path+"\",\n" +
                "                \"title\": \"path\",\n" +
                "                \"original\": \"path\"\n" +
                "        }";
        return config;
    }

其中this.imgUpload(upfile).getData()这个方法是之前写的springboot进行文件上传的接口，见：http://www.jianshu.com/p/a839637710f9 ， getData方法返回了图片的路径，
而这个接口中返回的json格式是官方api中规定的，见官方文档：http://fex.baidu.com/ueditor/#dev-request_specification 。
好了本地图片上传的接口已经写好了，最后就是设置一下编辑器的上传图片请求路径。
在前端页面中加入：

        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
                return 'http://localhost:8081/admin/imgUpload3';
            } else if (action == 'uploadvideo') {
                return 'http://a.b.com/video.php';
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }

好了，现在应该可以在编辑器中进行完整的图片上传了操作了。

springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传

推荐阅读更多精彩内容

springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传