kindeditor4.0幫助文檔

KindEditor是一套開(kāi)源的HTML可視化編輯器，主要用于讓用戶在網(wǎng)站上獲得所見(jiàn)即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。KindEditor使用JavaScript編寫(xiě)，可以無(wú)縫的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用，2006年7月首次發(fā)布2.0以來(lái)，KindEditor依靠出色的用戶體驗(yàn)和領(lǐng)先的技術(shù)不斷擴(kuò)大編輯器市場(chǎng)占有率，目前在國(guó)內(nèi)已經(jīng)成為最受歡迎的編輯器之一。

編輯器使用方法

1. 下載編輯器
下載 KindEditor 最新版本，下載之后打開(kāi) examples/index.html 就可以看到演示。

2. 部署編輯器
解壓 kindeditor-x.x.x.zip 文件，將所有文件上傳到您的網(wǎng)站程序目錄里，例如：http://您的域名/editor/

Note

您可以根據(jù)需求刪除以下目錄后上傳到服務(wù)器。

asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件
3. 修改HTML頁(yè)面¶
在需要顯示編輯器的位置添加textarea輸入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML內(nèi)容</strong>
</textarea>
Note

id在當(dāng)前頁(yè)面必須是唯一的值。
在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。
在有些瀏覽器上不設(shè)寬度和高度可能顯示有問(wèn)題，所以最好設(shè)一下寬度和高度。寬度和高度可用inline樣式設(shè)置，也可用 編輯器初始化參數(shù) 設(shè)置。
在該HTML頁(yè)面添加以下腳本。
<link rel="stylesheet" href="/editor/themes/default/default.css" />
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh_CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('#editor_id');
});
</script>
Note

第一個(gè)參數(shù)可用其它CSS選擇器，匹配多個(gè)textarea時(shí)只在第一個(gè)元素上加載編輯器。
通過(guò)K.create函數(shù)的第二個(gè)參數(shù)，可以對(duì)編輯器進(jìn)行配置，具體參數(shù)請(qǐng)參考 編輯器初始化參數(shù) 。
var options = {
cssPath : '/css/index.css',
filterMode : true
};
var editor = K.create('textarea[name="content"]', options);
4. 獲取HTML數(shù)據(jù)¶
// 取得HTML內(nèi)容
html = editor.html();

// 同步數(shù)據(jù)后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery

// 設(shè)置HTML內(nèi)容
editor.html('HTML內(nèi)容');

Note

KindEditor的可視化操作在新創(chuàng)建的iframe上執(zhí)行，代碼模式下的textarea框也是新創(chuàng)建的，所以最后提交前需要將HTML數(shù)據(jù)同步到原來(lái)的textarea，editor.sync()函數(shù)會(huì)完成這個(gè)動(dòng)作。
KindEditor在默認(rèn)情況下自動(dòng)尋找textarea所屬的form元素，找到form后onsubmit事件里添加sync函數(shù)，所以用form方式提交數(shù)據(jù)，不需要手動(dòng)執(zhí)行sync()函數(shù)。