easyUI整合富文本編輯器KindEditor詳細教程(附源碼)

緣由

在今年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倉庫或者開源中國代碼倉庫中查看源碼及項目文檔。