在線HTML編輯器Kindeditor-4.1.10簡易示例

KindEditor是一套開源的HTML可視化編輯器，主要用於讓用戶在網站上得到所見即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。下載地址：http://www.kindsoft.net/down.php

解壓文件以後的文件目錄以下圖：

 

其中，asp、asp.net、jsp和php文件夾是後臺處理程序，examples是演示文件，能夠根據本身需求刪除後上傳至本身的服務器。

接下來就是調用kindeditor，在頁面上實如今線HTML編輯功能。

第一步，先在須要調用編輯器的表單中添加文本域textarea，做爲KindEditor實現的載體，示例代碼以下：

1 <textareaid="editor_id"name="content"style="width:700px;height:300px;">
2 　　默認顯示的內容
3 </textarea>

第二步，引入KindEditor的js文件。因爲KindEditor是用JS編寫的，所以在初始化編輯器以前，必須引入KindEditor的js文件，引入方法示例代碼以下：

1 <script charset="utf-8" src="/你的目錄/kindeditor.js"></script>
2 <script charset="utf-8" src="/你的目錄/lang/zh_CN.js"></script>

第三步，初始化KindEditor編輯器，初始化示例以下：

1 <script>
2 　　KindEditor.ready(function(K) {
3 　　　　window.editor = K.create('#editor_id');
4 　　});
5 </script>

Note：id在當前頁面必須是惟一的值。

第四步，獲取KindEditor中的HTML數據。KindEditor的可視化操做在新建立的iframe上執行，代碼模式下的textarea框也是新建立的，因此最後提交前須要執行 sync() 將HTML數據設置到原來的textarea。示例代碼以下：

 1 <script>
 2 　　// 取得HTML內容
 3 　　html = editor.html();
 4 
 5 　　// 同步textarea["#editor_id"]和KindEditor數據後,能夠直接取得textarea的value,不然textarea的值爲空或者默認值
 6 　　editor.sync();
 7 　　// 在下列方法中選擇其一便可獲取到KindEditor的HTML數據
 8 　　html=document.getElementById('editor_id').value;// 原生API
 9　　 html=K('#editor_id').val();// KindEditor Node API
10 　　html=$('#editor_id').val();// jQuery// 設置HTML內容editor.html('HTML內容');
11 </script>

Note：
1.在textarea裏設置HTML內容便可實現編輯，在這裏須要注意的是，若是從服務器端程序(ASP、PHP、ASP.NET等)直接顯示內容，則必須轉換HTML特殊字符(>,<,&,」)。具體請參考各語言目錄下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
2.KindEditor在默認狀況下自動尋找textarea所屬的form元素，找到form後onsubmit事件裏添加sync函數，因此用form方式提交數據，不須要手動執行sync()函數。
3.KindEditor默認採用白名單過濾方式，可用 htmlTags 參數定義要保留的標籤和屬性。固然也能夠用 filterMode 參數關閉過濾模式，保留全部標籤。
 

參考內容：

1. KindEditor： http://kindeditor.net/docs/usage.html