在線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實現的載體，示例代碼如下：

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

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

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

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

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

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

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

<script>
　　// 取得HTML內容
　　html = editor.html();

　　// 同步textarea["#editor_id"]和KindEditor數據后,可以直接取得textarea的value,否則textarea的值為空或者默認值
　　editor.sync();
　　// 在下列方法中選擇其一即可獲取到KindEditor的HTML數據
　　html=document.getElementById('editor_id').value;// 原生API
 9　　 html=K('#editor_id').val();// KindEditor Node API
　　html=$('#editor_id').val();// jQuery// 設置HTML內容editor.html('HTML內容');
</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