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"文件。