动手扩充FreeTextBox的功能

作者：朱俊
代码：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增加各种各样的功能，开发出独具个性的产品：）

动手扩充FreeTextBox的功能相关推荐

自己动手实现远程执行功能
在排查问题的过程中,想查看内存中的一些参数值,却又没有方法把这些值输出到界面或日志中,又或者定位到某个缓存数据有问题,但缺少缓存的统一管理界面,不得不重启服务才能清理这个缓存.类似的需求有一个共同的特 ...
【Vue】动手实现录屏功能并本地保存
一.Vue 我们还是使用之前文章的Vue.js文件在这里Vue实现摄像头功能哦二.创建目录三.实现 1. index.html 代码: <!DOCTYPE html> <ht ...
扩充NetCMS的功能：添加{TM:Repeater}{/TM:Repeater}标签
本文档为{TM:Repeater} {/TM:Repeater}标签的说明文档,创建的目标是打算制造一个系列文档的索引,索引的目标是关于这个标签的相关文档. 简要说明: NetCMS 1.7(以下简 ...
[知识库分享系列] 二、.NET（ASP.NET）
最近时间又有了新的想法,当我用新的眼光在整理一些很老的知识库时,发现很多东西都已经过时,或者是很基础很零碎的知识点.如果分享出去大家不看倒好,更担心的是会误人子弟,但为了保证此系列的完整,还是选择分享 ...
freetextbox java_FreeTextBox-Java架构师必看
作者:朱俊代码:C#关键字:FreeTextBox.流媒体出自:http://blog.csdn.nJavaScript 作者:朱俊代码:C# 关键字:FreeTextBox.流媒体摘要:最近一个 ...
DOS批处理的字符串功能
DOS批处理的字符串功能批处理有着具有非常强大的字符串处理能力,其功能绝不低于C语言里面的字符串函数集.批处理中可实现的字符串处理功能有:截取字符串内容.替换字符串特定字段.合并字符串.扩充字符串等 ...
OSGI框架的功能和设计思
支持模块化的动态部署基于 OSGi 而构建的系统可以以模块化的方式(例如 jar 文件等)动态地部署至框架中,从而增加.扩展或改变系统的功能. 要以模块化的方式部署到 OSGi 中,必须遵循 OS ...
（转）DOS批处理的字符串功能
批处理有着具有非常强大的字符串处理能力,其功能绝不低于C语言里面的字符串函数集.批处理中可实现的字符串处理功能有:截取字符串内容.替换字符串特定字段.合并字符串.扩充字符串等功能.下面对这些功能一一进 ...
python 自动化办公 uibot_【插件开发】使用 Python 扩展 UiBot 的功能
前言: UiBot 除了自带的强大功能外,还允许有编程经验的开发人员对功能进行自由扩展,目前 UiBot 支持以下四种扩展方式: Python 插件.Lua 插件.Lua Mod 插件.COM 插件( ...

动手扩充FreeTextBox的功能

动手扩充FreeTextBox的功能相关推荐

最新文章

热门文章