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,服务器受不了,写文章的人也受不了。既然找到了按钮功能是如何实现的,就依样画葫芦,增加如下代码: 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 layoutspublic 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,而的工具栏里面没有从图片库插入图片这个按钮,看来我们的开发人员也已经改过这些代码:)上面的代码只不过是定义一些字符串,肯定还有解析的地方,在搜索结果里,还有这么一段: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增加各种各样的功能,开发出独具个性的产品:)
转载于:https://www.cnblogs.com/webman/archive/2006/08/17/479558.html
相关资源:JAVA上百实例源码以及开源项目