原因
在今年4月份的時候寫過一篇關於easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合優化篇（六）easyUI與富文本編輯器UEditor整合，從那時起，ssm項目中所使用的富文本編輯器都是UEditor。
文章的末尾也說了UEditor的一些坑：遮罩層問題，初始化和對象銷毀的問題，圖片上傳配置，官方jar包也有問題(貌似官方在mavne倉庫沒有jar包)
雖然解決了大部分，不過用着依然不是很舒服，中間也想過換一個，但是本人實在有些懶，直到前幾天才把另外一個富文本編輯器KindEditor整合進perfect-ssm項目里來。
簡介與比較
KindEditor使用JavaScript編寫，可以無縫的於Java、.NET、PHP、ASP等程序接合。 KindEditor非常適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用，2006年7月首次發布2.0以來，KindEditor依靠出色的用戶體驗和領先的技術不斷擴大編輯器市場占有率，目前在國內已經成為最受歡迎的編輯器之一。
這是KindEditor整合進perfect-ssm項目中的效果圖:
這是之前的UEditor編輯器效果圖:
雖然看上去差別不大，而且對於頁面功能來說也沒有特別大的改動，但是真正使用起來還是覺得KindEditor更加簡便一些(這是個人觀點)。
UEditor:
- 功能更多
- 樣式更加清爽，顯得朝氣蓬勃
- 用起來麻煩些
- 坑比較多，不省心
KindEditor:
- 功能中規中矩，相對UEditor來說可能少一些
- 樣式有些老氣
- 整合簡單
- 沒有太多的坑，省心
為什么會有這個對比呢？是因為最近寫一個項目的時候，試着在項目中整合了UEditor編輯器，它的功能雖然多，不過其中很大一部分基本用不到，而且這個玩意兒總是時不時的冒出來一個問題，再想想perfect-ssm項目整合了之后也有朋友會時不時的反饋一些問題，后來就直接棄掉換成了KindEditor，雖然功能不多，但是對於很多項目來說應該都足夠了，而且用起來真的很省心，一次整合，再也不用做其他處理了。
整合和配置
-
1.首先下載KindEditor編輯器，使用的是4.1.10版本，下載地址：
http://kindeditor.net/down.php -
2.將靜態文件放置到項目目錄中
-
3.在文章頁面引入KindEditor相關js文件：
<!--引入引入kindeditor編輯器相關文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/kindeditor-4.1.10/themes/default/default.css"/>
<script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/kindeditor-all.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/lang/zh_CN.js"></script>
- 4.在文章頁面上創建id為editor的
<textarea>元素,如下所示：
<textarea id="editor" style="width:600px;height:400px;visibility:hidden;">
</textarea>
//這里直接設置了寬高的值，另外一種方法是在KindEditor初始化時通過width屬性設置。
- 5.在文章頁面創建KindEditor(參數都是可選的，根據實際需要進行設置即可):
<script type="text/javascript">
$(function () {
//詳情編輯器
KindEditor.ready(function (K) {
this.editor
= K.create('textarea[id="editor"]', {
items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',
'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink'],
uploadJson: '/images',//指定上傳圖片的服務器端程序
fileManagerJson: '/images',//指定瀏覽遠程圖片的服務器端程序
allowFileManager: true
});
});
});
</script>
- 6.頁面邏輯完善
添加文章時將編輯器中的內容賦值給文章的content屬性：
function saveArticle() {
var title = $("#title").val();
var addName = $("#addName").val();
var content = editor.html();
var id = $("#articleIdfm").val();
var data = {"id": id, "articleTitle": title, "articleContent": content, "addName": addName}
...
...
修改文章時將編輯器中的內容修改為文章的content屬性值：
function openArticleModifyDialog() {
...
...
editor.html(row.articleContent);
}
編輯框關閉時，將編輯器清空，不然會顯示上一次的內容:
function resetValue() {
$("#title").val("");
editor.html();
...
...
}
- 7.后端接口功能完善
由於文章模塊是開發好的功能，因此后端代碼並沒有改動，這次的修改只是增加了KindEditor，其他代碼並沒有做任何更改。
perfect-ssm現在的菜單欄變成了這樣:
有興趣的朋友可以去比較一下，我暫時先將KindEditor設置為推薦了。
結語
perfect-ssm項目中增加了一個富文本編輯器KindEditor，這個編輯器相比較於原來的UEditor更加容易整合，相比較UEditor而言的話，KindEditor的問題和坑少一些，不過呢，類似的編輯器還是很多的，選擇適合自己的就好。
首發於我的個人博客，項目演示地址：perfect-ssm,登錄賬號：admin,密碼：123456
如果有問題或者有一些好的創意，歡迎給我留言，也感謝向我指出項目中存在問題的朋友。
如果你想繼續了解該項目可以查看整個系列文章Spring+SpringMVC+MyBatis+easyUI整合系列文章,也可以到我的GitHub倉庫或者開源中國代碼倉庫中查看源碼及項目文檔。