天天看点

在线Web编辑器

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之间的整数用于初始化编辑器的宽度。

    优点:优点是用户直接看到编辑器,比较直观。

    缺点:缺点是不管用户做不做编辑都要导入编辑器,不利于提高页面的性能。

    如图:

在线Web编辑器

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。

    优点:优点是用户只有需要编辑时才导入编辑器,对页面的性能有好处。

    缺点:缺点是只能直接看到内容,不能直接看到编辑器,打开时才能看到编辑器,不太直观。

    如图:

在线Web编辑器

5、其他说明

   集成方式请参考"bkheditor/demo.html"文件的内容。 bkheditor还提供了一些必要的接口,比如“文件浏览”,各接口的具体使用方法请参考"bkheditor/editor/dialog/interface"目录下各接口的"readme.txt"文件。

在线Web编辑器