富文本編輯器在項目中很常見，他可以將文本，圖片等信息存入數據庫，在編輯一些圖文混排的信息的時候很有用，比如商城項目的商品詳情頁，包含很多帶有樣式的文字和圖片。
此前一直使用的百度的富文本編輯器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;
}