FreeTextBox是.Net环境下广为流行的RichText编辑器，的blog在发表文章时就是使用的它。

最近一个项目要求可以在发表文章的时候能发布电影，当然不可能叫用户去写HTML代码了，于是决定扩充FreeTextBox的功能，即为它增加一个工具栏按钮，实现发布在线电影的功能。

没有看相关的文章，直接打开FreeTextBox的源代码工程，发现工程结构组织还是比较好，源代码也有注释，注意到ToolbarControls目录下面有ToolbarItem.cs、ToolbarItems.cs和ToolbarButton.cs ，肯定是在这里了。粗看了一下代码，发现在ToolbarItems.cs有很多静态属性，分别返回很多ToolbarButton。其中有很熟悉的：

  /// <summary>  /// Returns a ToolbarButton with InsertImageFromGallery JavaScript functions builtin  /// </summary>     public static ToolbarButton InsertImageFromGallery {   get {    ToolbarButton button = new ToolbarButton("插入图片（来自图片库）","insertimagefromgallery","FTB_InsertImageFromGallery_CLIENTID");    button.ScriptBlock = @"<script language=""JavaScript"">function FTB_InsertImageFromGallery_CLIENTID(editor,htmlmode) { if (htmlmode) return; editor.focus();

 obj = FTB_GetRangeReference(editor); if (obj.tagName == 'IMG') {  editor.document.execCommand('insertimage',1,'');  return; }

 var folder = 'IMAGEGALLERYPATH'; var galleryscript = FTB_HelperFilesPath + 'ftb.imagegallery.aspx?rif='+folder+'&cif='+folder; if (FTB_HelperFilesParameters != '') galleryscript += '&' + FTB_HelperFilesParameters; imgArr = showModalDialog(galleryscript,window,'dialogWidth:560px; dialogHeight:500px;help:0;status:0;resizeable:1;');

 if (imgArr != null) {  imagestring = '<IMG SRC=""' + imgArr['filename'] + '"" HEIGHT=' + imgArr['height'] + ' WIDTH=' + imgArr['width'] + ' BORDER=0>';  sel = editor.document.selection.createRange();  sel.pasteHTML(imagestring); } else {  alert(""您没有选择图片。""); }}</script>";    return button;   }  } 

没错，这段代码就是为什么你按下插入图片（来自图片库）按钮，会出来一个网页对话框，让你选择图片的原因。注意看其中的var galleryscript = FTB_HelperFilesPath + 'ftb.imagegallery.aspx?rif='+folder+'&cif='+folder;if (FTB_HelperFilesParameters != '') galleryscript += '&' + FTB_HelperFilesParameters;imgArr = showModalDialog(galleryscript,window,'dialogWidth:560px; dialogHeight:500px;help:0;status:0;resizeable:1;');整个FreeTextBox的编辑操作几乎都是在客户端完成，这是它的高明之处，否则动不动就PostBack,服务器受不了，写文章的人也受不了。既然找到了按钮功能是如何实现的，就依样画葫芦，增加如下代码：