动手扩充FreeTextBox的功能(原创)

原创 2004年08月21日 21:11:00

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示意图

图中用黄圈圈起来的按钮就是我们增加的发布电影功能,试一下,你也可以为FreeTextBox增加各种各样的功能,开发出独具个性的产品:)
(文中代码经复制后有些走样,见谅)

动手扩充FreeTextBox的功能

作者:朱俊代码:C#关键字:FreeTextBox、流媒体出自:http://blog.csdn.net/foxmail/archive/2004/08/21/81096.aspx摘要:最近一个项目要...
  • 21aspnet
  • 21aspnet
  • 2005年01月18日 09:57
  • 11063

手动扩充FreeTextBox的功能

FreeTextBox是.Net环境下广为流行的RichText编辑器,CSDN的blog在发表文章时就是使用的它。最近一个项目要求可以在发表文章的时候能发布电影,当然不可能叫用户去写HTML代码了,...
  • jxufewbt
  • jxufewbt
  • 2007年05月07日 16:48
  • 558

类加载及执行子系统的案例与实践

1:案例分析1.1 Tomcat:正统的类加载器架构    一个功能鉴权的Web服务器,需要解决的问题: 部署在同一服务器上的两个Web应用程序所使用的Java类库可以实现相互隔离。 服务器需要尽可能...
  • jiaxiuya
  • jiaxiuya
  • 2016年07月23日 11:26
  • 318

为什么freetextbox不显示按钮呢

freetextbox 使用
  • maiyude
  • maiyude
  • 2010年06月10日 14:59
  • 801

FreeTextBox使用详解(FTBv3-1-6)

文本编辑框,类似于csdn使用的fckedit。具有广泛的用途。下面介绍其中之一FreeTextBox:下载FreeTextBox:http://freetextbox.com/files/6949/...
  • longronglin
  • longronglin
  • 2007年05月08日 11:15
  • 6460

FreeTextBox上传图片

FreeTextBox基本用法和上传图片 eWebEditor、WebHtmlEidtor   等许多在线编辑器默认都有一个功能,可以实时把图片上传到服务器并插入到编辑器里面,而在 ...
  • dannywj1371
  • dannywj1371
  • 2012年10月21日 15:43
  • 1321

HashMap(4)--动手实现HashMap

自己动手写个HashMap小程序
  • mgl934973491
  • mgl934973491
  • 2017年03月17日 12:07
  • 220

JS扩充类型的功能

//通过给Funtion.prototype增加方法来使得该方法对所有函数可用 Function.prototype.method = function(name,func){     //基本类...
  • kongjunchao159
  • kongjunchao159
  • 2015年08月17日 17:31
  • 411

在freetextbox控件中使用中文字体

1.首先引入命名空间:using FreeTextBoxControls;   2.插入中文字体相关代码:    Toolbar toolbar1 = MyContent.Toolbars[0];//...
  • tlty
  • tlty
  • 2008年02月29日 14:05
  • 2312

让FreeTextBox(一个HTML编辑器) 支持上传本地图片并插入编辑器中

如果你不是很明白html编辑器的原理,请您看看我专门写的这个简单例子,演示了将一个iframe变成html编辑器,让编辑器load数据,在编辑器的光标处插入指定HTML数据。 在编辑器的光标处插入指定...
  • cnfengxx
  • cnfengxx
  • 2004年06月25日 16:53
  • 1479
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动手扩充FreeTextBox的功能(原创)
举报原因:
原因补充:

(最多只允许输入30个字)