项目中需要使用到富文本编辑器，找来找去发现百度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进行文件上传的接口，见：//www.greatytc.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);
}
}
好了，现在应该可以在编辑器中进行完整的图片上传了操作了。
