KindEditor是一款非常棒的國產可視化編輯器，主要用于讓用戶在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。

下面介紹KindEditor編輯器的調用方法，非常簡單方便，有了它可以拋棄CKEditor了！

1、下載 KindEditor 最新版本。
下載地址：http://www.wsalc.com/2011/9-27/KindEditor-4.0.html

2、解壓zip文件，將所有文件上傳到您的網站程序目錄下。例如：http://您的域名/editor/

3、在需要顯示編輯器的位置添加TEXTAREA輸入框。

id在當前頁面必須是唯一的值，還有，在有些瀏覽器上不設寬度和高度可能顯示有問題，所以最好設一下寬度和高度。寬度和高度可用inline樣式設置，也可用編輯器初始化參數設置。

在TEXTAREA里設置HTML內容即可實現編輯，在這里需要注意的是，如果從服務器端程序(ASP、PHP、ASP.NET等)直接顯示內容，則必須轉換HTML特殊字符(>,<,&,")。 具體請參考各語言目錄下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。

<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML內容&lt;/strong&gt;
</textarea>

4、在該HTML頁面添加以下腳本。

<script charset="utf-8" src="/editor/kindeditor.js"></script><script>
        KE.show({
                id : 'editor_id'
        });
</script>

注：KE.show的原理是先執行KE.init設置一些變量，等DOM全部創建以后才開始執行KE.create創建編輯器。 如果瀏覽器不觸發DOMContentLoaded事件（例如：jQuery的$.ready，點擊某個按鈕，通過innerHTML插入HTML等），則不能使用KE.show，需要直接調用KE.init和KE.create。

KE.init({
        id : 'editor_id'});$.ready(function() {
        KE.create('editor_id');
});

調用KE.show和KE.init時，除id之外還可以設置其它的參數，具體屬性請參考編輯器初始化參數。

5、取得編輯器的HTML內容。

KindEditor的可視化操作在新創建的iframe上執行，代碼模式下的textarea框也是新創建的，所以最后提交前需要將HTML數據同步到原來的textarea，KE.sync函數會完成這個動作。

KindEditor在默認情況下自動尋找textarea所屬的form元素，找到form后onsubmit事件里添加KE.sync函數，所以用form方式提交數據，不需要手動執行KE.sync函數。

//取得HTML內容
html = KE.html('editor_id');
//同步數據后可以直接取得textarea的value
KE.sync('editor_id');
html = document.getElementById('editor_id').value;
html = $('#editor_id').val(); //jQuery
//設置HTML內容
KE.html('editor_id', 'HTML內容');