作者：朱俊 代码：C#
关键字：FreeTextBox、流媒体
出自：http://blog.csdn.net/foxmail/archive/2004/08/21/81096.aspx
摘要：最近一个项目要求可以在发表文章的时候能发布电影，当然不可能叫用户去写HTML代码了，于是决定扩充FreeTextBox的功能，即为它增加一个工具栏按钮，实现发布在线电影的功能。
FreeTextBox是.Net环境下广为流行的RichText编辑器，CSDN的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,服务器受不了，写文章的人也受不了。
既然找到了按钮功能是如何实现的，就依样画葫芦，增加如下代码：
public static ToolbarButton InsertMovie { get { ToolbarButton button = new ToolbarButton("插入电影","InsertMovie","FTB_InsertMovie_CLIENTID"); button.ScriptBlock = @"<script language=""JavaScript""> function FTB_InsertMovie_CLIENTID(editor,htmlmode) { if (htmlmode) return; editor.focus();
var filmURL = window.prompt('支持电影格式为:avi、mpg、mpeg、asf、wmv、ra和ram等。/n请输入电影地址','Http://');
if (filmURL != null) { filmstring = '<object classid=""clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"" id=""WindowsMediaPlayer1"">'; filmstring ='<param name=""URL"" value=""' filmURL '"">'; filmstring ='<param name=""AutoSize"" value=""0"">'; filmstring ='<param name=""AutoStart"" value=""0"">'; filmstring ='</object>'; sel = editor.document.selection.createRange(); sel.pasteHTML(filmstring); } else { //alert(""您没有选择图片。""); } } </script>"; return button; } }
其中var filmURL = window.prompt('支持电影格式为:avi、mpg、mpeg、asf、wmv、ra和ram等。/n请输入电影地址','Http://'); 得到用户输入的电影地址，考虑到项目进度要求，没有采用图片库那种方式，而是直接输入电影网址的方式。
按钮做好了，如何让它出现在工具栏呢？好办。 搜索InsertImageFromGallery，我只要找到人家怎么加的，我就可以加了。 结果只出来13个结果，看到其中有几个是Support/ToolbarGenerator.cs，可以肯定，就是这了。
点击搜索结果，可以看到如下代码： public class ToolbarGenerator { //Toolbar layouts public static string DefaultConfigString = "Bold,Italic,Underline,Strikethrough;Superscript,Subscript,RemoveFormat|FontFacesMenu,FontSizesMenu, FontForeColorsMenu|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent; CreateLink,Unlink,InsertImageFromGallery,InsertTable,InsertRule|Cut,Copy,Paste;Undo,Redo,Print,ieSpellCheck";
public static string AlternateConfigString = "Save,Print,Undo,Redo,WordClean,InsertTable|ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorPicker, FontBackColorPicker,SymbolsMenu|Bold,Italic,Underline,Strikethrough;Superscript,Subscript,RemoveFormat| JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink, InsertImageFromGallery,InsertRule|Cut,Copy,Paste,ieSpellCheck";
public static string EnableAllConfigString = "ParagraphMenu,FontFacesMenu,FontSizesMenu|FontForeColorsMenu,FontForeColorPicker,FontBackColorsMenu, FontBackColorPicker|Bold,Italic,Underline,Strikethrough,Superscript,Subscript;InsertImageFromGallery,CreateLink, Unlink,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent| Cut,Copy,Paste,Delete;Undo,Redo,Print,Save|StyleMenu,SymbolsMenu,InsertHtmlMenu|InsertRule,InsertDate, InsertTime,WordCount,ieSpellCheck,WordClean,InsertTable";
public static string MinimalConfigString = "Bold,Italic,Underline";?
用过FreeTextBox的朋友都知道，FreeTextBox有几种工具栏的模式，显然，这里就是定义不同工具栏出现不同按钮的地方，除了最后一种很少按钮的模式以外，其它的都有InsertImageFromGallery，而CSDN的工具栏里面没有从图片库插入图片这个按钮，看来我们CSDN的开发人员也已经改过这些代码：）
上面的代码只不过是定义一些字符串，肯定还有解析的地方，在搜索结果里，还有这么一段： case "insertimagefromgallery": return ToolbarItems.InsertImageFromGallery; 是了，就是在这里解析的。于是，再次依样画葫芦，加入如下代码 case "insertmovie": return ToolbarItems.InsertMovie;
同时，修改定义部分为： public static string EnableAllConfigString = "ParagraphMenu,FontFacesMenu,FontSizesMenu|FontForeColorsMenu,FontForeColorPicker, FontBackColorsMenu,FontBackColorPicker|Bold,Italic,Underline,Strikethrough,Superscript,Subscript; InsertMovie,InsertImageFromGallery,CreateLink,Unlink,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter, JustifyFull;BulletedList,NumberedList,Indent,Outdent|Cut,Copy,Paste,Delete;Undo,Redo,Print,Save|StyleMenu, SymbolsMenu,InsertHtmlMenu|InsertRule,InsertDate,InsertTime,WordCount,ieSpellCheck,WordClean,InsertTable";
即在InsertImageFromGallery旁边加入了InsertMovie,
编译，一次通过，把生产的FreeTextBox.DLL复制到项目文件夹，一运行发表文章,成功!
效果如下图:
图中用黄圈圈起来的按钮就是我们增加的发布电影功能，试一下，你也可以为FreeTextBox增加各种各样的功能，开发出独具个性的产品：）
本文由来源 21aspnet，由 javajgs_com 整理编辑，其版权均为 21aspnet 所有，文章内容系作者个人观点，不代表 Java架构师必看 对观点赞同或支持。如需转载，请注明文章来源。
