富文本编辑器在项目中很常见，他可以将文本，图片等信息存入数据库，在编辑一些图文混排的信息的时候很有用，比如商城项目的商品详情页，包含很多带有样式的文字和图片。
此前一直使用的百度的富文本编辑器ueditor。
直接说怎么用。
1.首先去下载安装包，把它放在webapp下面，如下所示。至于如何下载，可自行百度。
2.maven项目的话需要在pom.xml中加入如下语句，以导入所需要的包。
<!-- 百度富文本 -->
<dependency>
<groupId>com.github.qiuxiaoj</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20170516</version>
</dependency>
如果不是maven项目则将安装包中jsp下的lib下的jar包拷入项目的lib下即可。
3.在页面中引入相关的js文件。
<!-- 百度编辑器 -->
<script type="text/javascript" charset="utf-8"
src="./ueditor1_4_3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
src="./ueditor1_4_3/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8"
src="./ueditor1_4_3/lang/zh-cn/zh-cn.js">
4.配置ueditor的相关文件，首先配置ueditor.config.js这个文件，主要是为了能让上传图片等功能生效，才需要配置这个文件。
我截图了一部分，主要是注意截图这两个地方的配置，相信看了我的项目结构，大家都明白是怎么回事了。HOME_URL即是项目根目录+编辑器所在的根目录，serverUrl为HOME_URL下去寻找controller.jsp这个文件，此文件就相当于ueditor的一个controller，我们后台所要进行的所有操作，比如上传文件等，都是通过访问这个controller来实现的，所以一定要配置正确。
接下来是配置config.json这个文件，我主要是配置了图片上传的路径。如下所示。
配置完以上两项后，在浏览器中键入如下地址来验证配置是否正确。
http://localhost:8080/warrior/ueditor1_4_3/jsp/controller.jsp?action=config
大概意思就是访问controller.jsp中action=config这个方法吧，这是ueditor封装好的后台代码，我们也看不到。如果配置成功，你会看到如下的返回值。
大概的意思就是显示出了配置项的内容。如果你看到的不是上述内容，说明配置有误。
5.页面编写，以下页面是产品的编辑页，它把之前录入的内容回显，然后修改以后，再重新提交。我们只看与编辑器相关的部分。
首先是表单，代码如下。
<tr>
<th>description：</th>
<td>
<div id="dpeditor1" type="text/plain" name="description"
style="width: 800px; height: 400px;"></div>
</td>
</tr>
<tr>
<th>Available In：</th>
<td>
<div id="dpeditor2" type="text/plain" name="surface"
style="width: 800px; height: 400px;"></div>
</td>
</tr>
然后是配置ueditor的工具栏并且赋值给表单，并且在加载完成后回显。
<script type="text/javascript">
var ue_param = {//工具栏配置项
toolbars : [ [ 'cleardoc', 'selectall', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'strikethrough', 'fontsize',
'forecolor', 'fontfamily', 'link', '|', 'justifyleft',
'justifycenter', 'justifyright', '|', 'horizontal',
'pasteplain', '|', '|', 'removeformat', '|', 'charts','|','simpleupload' ]
],
autoHeightEnabled : false,
autoFloatEnabled : false,
elementPathEnabled : false,
relativePath : true,
pasteplain : true,
saveInterval : 60 * 60 * 24,
wordCount : false,
}
var ue1 = UE.getEditor('dpeditor1', ue_param);
ue1.ready(function() {
var temp = $('.temp_n1').html();
ue1.setContent(temp);//回显
});
var ue2 = UE.getEditor('dpeditor2', ue_param);
ue2.ready(function() {
var temp = $('.temp_n2').html();
ue2.setContent(temp);//回显
});
</script>
代码很简洁，需要注意的是回显我借助了两个临时表单，temp_n1和temp_n2，因为这边有两个富文本编辑器。
<div class="temp_n1" style="display: none">
${product.description}</div>
<div class="temp_n2" style="display: none">${product.surface}</div>
6.我们来看看效果。
这样就完成了ueditor配置，也能保证基本的图片上传功能。
PS：有时候我们部署项目的时候，是不希望显示项目名称的，我们希望直接访问域名即可，如本例中我们不希望显示warrior这个项目名，这时候ueditor图片上传的配置需要做相应的更改。
比如说对tomcat项目而言，我把war包解压后直接放入root文件夹下，此时就相当于不需要访问项目名warrior，直接访问http://192.168.1.185:8080/admin这样就可以进入到系统，而这时我们发现富文本编辑器的上传图片功能失效了。什么原因呢？
这是因为我们之前配置的ueditor.config.js和config.json路径是有项目名称的，而现在没有项目名称了，程序自然找不到。把这两个地方的项目名称去掉即可，如图。
这样就可以了。
PSS:如果有做负载均衡，希望从编辑器上传的图片都传到一个tomcat项目下以确保图片信息同步，则需在nginx的配置文件中添加如下配置项，这样，图片就都可以上传到http://xdxfile.com这个代理所在的服务上。
location ~ ^/ueditor1_4_3{
proxy_pass http://xdxfile.com;
}
