KindEditor是一款非常棒的國(guó)產(chǎn)可視化編輯器，主要用于讓用戶在網(wǎng)站上獲得所見(jiàn)即所得編輯效果，開發(fā)人員可以用 KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無(wú)縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。
下面介紹KindEditor編輯器的調(diào)用方法，非常簡(jiǎn)單方便，有了它可以拋棄CKEditor了！
1、下載 KindEditor 最新版本。
下載地址：http://virtualinteriordefine.com/2011/9-27/KindEditor-4.0.html
2、解壓zip文件，將所有文件上傳到您的網(wǎng)站程序目錄下。例如：http://您的域名/editor/
3、在需要顯示編輯器的位置添加TEXTAREA輸入框。
id在當(dāng)前頁(yè)面必須是唯一的值，還有，在有些瀏覽器上不設(shè)寬度和高度可能顯示有問(wèn)題，所以最好設(shè)一下寬度和高度。寬度和高度可用inline樣式設(shè)置，也可用編輯器初始化參數(shù)設(shè)置。
在TEXTAREA里設(shè)置HTML內(nèi)容即可實(shí)現(xiàn)編輯，在這里需要注意的是，如果從服務(wù)器端程序(ASP、PHP、ASP.NET等)直接顯示內(nèi)容，則必須轉(zhuǎn)換HTML特殊字符(>,<,&,")。 具體請(qǐng)參考各語(yǔ)言目錄下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML內(nèi)容</strong>
</textarea>
4、在該HTML頁(yè)面添加以下腳本。
<script charset="utf-8" src="/editor/kindeditor.js"></script><script>
KE.show({
id : 'editor_id'
});
</script>
注：KE.show的原理是先執(zhí)行KE.init設(shè)置一些變量，等DOM全部創(chuàng)建以后才開始執(zhí)行KE.create創(chuàng)建編輯器。 如果瀏覽器不觸發(fā)DOMContentLoaded事件（例如：jQuery的$.ready，點(diǎn)擊某個(gè)按鈕，通過(guò)innerHTML插入HTML等），則不能使用KE.show，需要直接調(diào)用KE.init和KE.create。
KE.init({
id : 'editor_id'});$.ready(function() {
KE.create('editor_id');
});
調(diào)用KE.show和KE.init時(shí)，除id之外還可以設(shè)置其它的參數(shù)，具體屬性請(qǐng)參考編輯器初始化參數(shù)。
5、取得編輯器的HTML內(nèi)容。
KindEditor的可視化操作在新創(chuàng)建的iframe上執(zhí)行，代碼模式下的textarea框也是新創(chuàng)建的，所以最后提交前需要將HTML數(shù)據(jù)同步到原來(lái)的textarea，KE.sync函數(shù)會(huì)完成這個(gè)動(dòng)作。
KindEditor在默認(rèn)情況下自動(dòng)尋找textarea所屬的form元素，找到form后onsubmit事件里添加KE.sync函數(shù)，所以用form方式提交數(shù)據(jù)，不需要手動(dòng)執(zhí)行KE.sync函數(shù)。
//取得HTML內(nèi)容
html = KE.html('editor_id');
//同步數(shù)據(jù)后可以直接取得textarea的value
KE.sync('editor_id');
html = document.getElementById('editor_id').value;
html = $('#editor_id').val(); //jQuery
//設(shè)置HTML內(nèi)容
KE.html('editor_id', 'HTML內(nèi)容');