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

下面开始介绍开发过程：

引入富文本编辑器UEditor

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

将所有下载好的js包(官方有jsp、php等几个版本的包，我下载的是jsp的)放入resources目录下的static下，我在里面建立了个js目录，下面又搞了个ueditor包用于存放所有编辑器js。

页面中引入编辑器

引入相关js文件：

其中/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);

}

}

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