开发指南

    ufree编辑器的作者仅保留当您将ufree编辑器用于商业站点时的知情权，即当您将ufree编辑器用于商业站点时需要以邮件等方式告知作者您正将ufree编辑器或它的衍生开发版本用于该站点中。除此之外，您可以自由、免费的使用ufree编辑器各版本，并可以任意的对ufree编辑器的代码进行修改、扩充等工作。

    如果您是一名开发人员，并且有兴趣对ufree编辑器进行各种进一步的开发，下面的内容将可能对您的工作有所帮助。

1.1 ufree编辑器的扩展方向

    ufree1.0编辑器目前已经提供了一些用于文本和WEB页面编辑的主体编辑功能，通过下述几个方面的扩展，可以为用户提供更为强大的编辑功能：

1.1.1 基本编辑功能扩展

    基本编辑功能的进一步开发，如为用户提供更多的表格编辑功能或提供更多的控件类型都属于这一范畴的扩展。

1.1.2 开发图片素材库

    目前的ufree编辑器只是提供了基本编辑功能，但是一款编辑器的易用性在很大程度上也取决于向用户提供的可用资源的丰富程度，由于ufree编辑器提供的ppt模式的编辑方式，使得ufree不同于传统的编辑器，更加需要图片素材库来方便用户的编辑。图片素材库的开发可以借鉴如PowerPoint的模式。

    注意：如果将ufree编辑器作为单机编辑工具使用，那么页面中显示的所有图片都必须有明确的路径，因此多数情况下都需要将编辑页面中所用的图片和编辑页面放在同一个文件夹下或子文件夹中，这和一般WEB页编辑所形成的文件结构是相同的。所以图片素材库在单机使用中会有一些不便，解决的办法将在使用说明中叙述。

1.1.3 新功能扩展

    受到XHTML和JAVASCRIPT/JSCRIPT语言本身特性的限制，ufree编辑器及类似编辑器在编辑功能上存在很多弱点，尤其是图形编辑能力。出于提供最佳兼容性和基本功能框架的考虑，ufree目前并没有采用其它新的扩展开发包进行新功能的开发，但是在未来，随着其它开发包开发语言的完善，ufree也可以利用这些开发包进行新功能的开发。

1.2 ufree编辑器的扩展开发

   您对ufree编辑器进行的扩展通常将可能涉及到以下的修改，下面的介绍可以帮助开发人员快速寻找到修改ufree编辑器的入口，也可以帮助非开发人员对ufree进行简单的修改。

   标准ufree的在线部署版本有以下几个文件,为了便于部署,它们实际被合并为maincode.js,但是您可以在该文件中通过注释分辨它们:

startcode.js  其中包含用于界面初始化和拖动工具条的代码

editorcode.js  其中包含编辑器的功能性代码，此外还负责调用startcode.js中的界面函数来实际生成界面

code.js  该文件是‘代码插入’按钮的功能性代码，其代码引自‘双鱼文本编辑器’，向原作者表示感谢

style.css  该文件是ufree编辑器的样式表文件，用于控制样式

   下面介绍如何为ufree添加扩展的图片素材库为例来简单说明如何进行扩展。

1.选择一个工具条，在这个工具条上添加一个按钮。

这里我们选择将图片素材库按钮放置在编辑工具条的末尾，这样就需要增加编辑工具条的长度，到style.css文件中找到编辑工具条textbar，由于增加一个按钮需要33px的宽度，因此我们为textbar的width参数增加33px，即width:878px

然后我们打开startcode.js文件，找到其中的init函数，在其中我们可以看到mainbar、textbar等很多键-值类型，这其中的每个button（n）对应了一个按钮所涉及的各种信息，我们寻找到textbar，然后在其中末尾的位置追加按钮button25如下：  

"button25":{"id":"",                                   //不需要进行设置
     "title":"扩展图片库",                           //工具条上将弹出的提示
     "position":"left:845px;",                     //按钮的位置
     "method":"popImgExt(this,event)",  //该按钮对应的方法
     "nextnode":{"alt":"扩展图片库",       //同title的设置
       "src":"img/b25.gif"                          //按钮图标的路径
       }
     }

注意到最后的b25.gif了么？是的，您还需要为新按钮制作一个图标，然后将它放置在img文件夹中。

2.还记得上面设置的method:popImgExt(this,event)么?我的意思是用户点选该按钮后应该象弹出颜色设置框一样弹出该框体,其中是各种扩展图片可供用户选择,因此还需要编写一个扩展图片框的代码,具体的代码风格您可以参见ufree的startcode.js文件中的颜色设置框代码及其弹出方式,而对于图片本身的大小调节将不需要额外编写代码,因为ufree对于所有img标签元素都会自动弹出相应的图片工具条!

3.在编写好了大的扩展图片框后,当然您还需要为具体的每个图片编写它们的方法,当用户点选该图片时,即将该图片放置在编辑区内。

---