bkheditor是一個與浏覽器無關、與伺服器無關、純用戶端、內建方式最簡化的線上Web編輯器。bkheditor剛推出就得到部落格園朋友們“酷”的贊美之詞,為了友善朋友們了解和使用,特用此文檔對內建方法進行詳細說明。
1、擷取和安裝方法
下載下傳位址:http://www.bokehou.com/tools/bkheditor/demo.html
下載下傳方法:下載下傳600k大小的bkheditor.zip,解壓後得到bkheditor檔案夾。
安裝方法:将bkheditor檔案夾複制到你網站任何需要的位置即可(bkheditor/demo.html直接可用)。
2、在你的網頁導入"bkheditor.js"腳本檔案,代碼如:
<script type="text/javascript" src="x/y/z/bkheditor.js"></script>
3、在需要的網頁位置直接生成編輯器的方法,代碼如:
<div>
<input type="hidden" id="HiddenId" value="<font color=\'red\'>初始HTML文本1</font>" />
<script type="text/javascript">
bkh_MakeEditor("HiddenId",false,1,2);
</script>
</div>
其中:bkh_MakeEditor("HiddenId",false)來源于"bkheditor.js",用于生成編輯器,
第1個參數HiddenId:是一個隐藏域的ID,編輯器用它來存取HTML資料,當采用服務端控件時,要確定 此 參數是控件的ClientID。第2個參數bShowAll:true表示初始化為全功能編輯器, false表示初始化為簡易型編輯器。第三個參數iHeightIndex是1-5之間的整數用于初始化編輯器的高度,第四個參數iWidthIndex是1-5之間的整數用于初始化編輯器的寬度。
優點:優點是使用者直接看到編輯器,比較直覺。
缺點:缺點是不管使用者做不做編輯都要導入編輯器,不利于提高頁面的性能。
如圖:

4、以對話框的方式使用編輯器的方法,代碼如:
<button onclick="bkh_OpenEditor(\'ContentId\')">打開編輯器</button>
<div id="ContentId" style="width:480px;height:200px;overflow:scroll;border:#cccccc 1px solid;" >
<font color=\'red\'>初始HTML文本3</font>
</div>
其中:bkh_OpenEditor(\'ContentId\')來源于“bkheditor.js”,用于為内容區打開編輯器,
參數ContentId:是一個具有"innerHTML"屬性的塊的ID,編輯器用它來存取HTML資料。當采用服務端控件時,要確定此參數是控件的ClientID。
優點:優點是使用者隻有需要編輯時才導入編輯器,對頁面的性能有好處。
缺點:缺點是隻能直接看到内容,不能直接看到編輯器,打開時才能看到編輯器,不太直覺。
如圖:
5、其他說明
內建方式請參考"bkheditor/demo.html"檔案的内容。 bkheditor還提供了一些必要的接口,比如“檔案浏覽”,各接口的具體使用方法請參考"bkheditor/editor/dialog/interface"目錄下各接口的"readme.txt"檔案。