刚开始试用FTB2.0的时候,感觉FTB真的很神,居然可以在网页状态实现编辑过程的What you see is what you get。看完FTB的文档(其实也不是很多的东西,估计就是用个NDOC或者什么类似的工具生成的SDK文档)又仔细试做了几个程序,觉得FTB的实现思路不复杂,但十分巧妙。它通过FTB这个中间部件将客户端(浏览器)的程序(javascript代码)和后台程序(C#写的aspx等ASP.NET代码)紧密结合,从而实现了这种所见即所得的效果。
FTB的结构主要有三个命名空间组成:
FreeTextBoxControls,FreeTextBoxControls.Design和FreeTextBoxControls.Support。
使用得最多的是FreeTextBoxControls,基本上用到的界面部件都来自于这里,例如ToolBar上每个功能Button可以在这里找到映射,而每个Button又对应着javascrip中的一个函数功能。
例如:下划线这个功能,有个Underline的类(继承于ToolbarButton)实现,而这个类实际调用客户端的一段javascript代码FTB_Underline(在FreeTextBox-ToolbarItemsSrcipt.js中)。



如果再深究下去,仔细跟踪下这段js的代码又可以它调用FTB_Format这段代码(在FreeTextBox-MainScript.js中)。









它正是通过document的execCommand方法来实现效果的,查MSDN文挡可以发现它对应执行的正是Underline的命令参数。
execCommand可以执行的命令参数:












































































































































































































































基本上每个命令参数都可以在FTB的FreeTextBoxControls中找到对应的实现类,如果觉得有些没有实现,自己参照已经实现的功能来增加也十分简单和方便。
FTB还提供了公开的接口,例如继承于ToolbarButton可以实现对应的工具按钮,继承于ToolbarDropDownList则实现下拉式选择(如选择字体那种),对应javascript的方法只须传递对应的方法名字符串给类即可,自己写的javascript可以放在js中,也可以放在ScriptBlock的字符串参数里面,前者前端查看源码看不到,后者则将整个函数源码传回,一切都十分公开和方便。
这种思路是否也和ASP.NET的思路类似?
由于javascript可以被多种浏览器支持(估计有些小兼容问题,可以通过javascript来兼容),因此FTB可以在多种环境下正常工作。现在用的这个blog系统(.Text)也用了FTB,但版本是1.6.3.26037(汉化版),有兴趣可以在发表文章的地方查看网页源代码看看,就会发现好多的FTB_XXX的javascript函数。这些在2.0已经全部集中放到FreeTextBox-ToolbarItemsSrcipt.js和FreeTextBox-MainScript.js中了,应该说这样比较归一些。
如果担心FTB的免费协议对商业用途有些影响的话,自己根据这个思路来开发一个适合自己产品用的所见即所得编辑器控件应该也不是难事。
本文转自风前絮~~博客园博客,原文链接:http://www.cnblogs.com/windsails/archive/2004/09/27/47143.html,如需转载请自行联系原作者