FreeTextBox是.Net環(huán)境下廣為流行的RichText編輯器，CSDN的blog在發(fā)表文章時(shí)就是使用的它。

最近一個(gè)項(xiàng)目要求可以在發(fā)表文章的時(shí)候能發(fā)布電影，當(dāng)然不可能叫用戶(hù)去寫(xiě)HTML代碼了，
于是決定擴(kuò)充FreeTextBox的功能，即為它增加一個(gè)工具欄按鈕，實(shí)現(xiàn)發(fā)布在線電影的功能。

沒(méi)有看相關(guān)的文章，直接打開(kāi)FreeTextBox的源代碼工程，發(fā)現(xiàn)工程結(jié)構(gòu)組織還是比較好，
源代碼也有注釋，注意到ToolbarControls目錄下面有ToolbarItem.cs、ToolbarItems.cs和
ToolbarButton.cs ，肯定是在這里了。粗看了一下代碼，
發(fā)現(xiàn)在ToolbarItems.cs有很多靜態(tài)屬性，分別返回很多ToolbarButton。
其中有很熟悉的：

??/// <summary>
??/// Returns a ToolbarButton with InsertImageFromGallery JavaScript functions builtin
??/// </summary>???
??public static ToolbarButton InsertImageFromGallery {
???get {
????ToolbarButton button = new ToolbarButton("插入圖片（來(lái)自圖片庫(kù)）","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(""您沒(méi)有選擇圖片。"");
?}
}
</script>";
????return button;
???}
??}?

沒(méi)錯(cuò)，這段代碼就是為什么你按下插入圖片（來(lái)自圖片庫(kù)）按鈕，會(huì)出來(lái)一個(gè)網(wǎng)頁(yè)對(duì)
話框，讓你選擇圖片的原因。注意看其中的
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;');

整個(gè)FreeTextBox的編輯操作幾乎都是在客戶(hù)端完成，這是它的高明之處，否則動(dòng)不動(dòng)
就PostBack,服務(wù)器受不了，寫(xiě)文章的人也受不了。

既然找到了按鈕功能是如何實(shí)現(xiàn)的，就依樣畫(huà)葫蘆，增加如下代碼：

??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請(qǐng)輸入電影地址','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(""您沒(méi)有選擇圖片。"");
?}
}
</script>";
????return button;
???}
??}?

其中var filmURL = window.prompt('支持電影格式為:avi、mpg、mpeg、asf、wmv、ra和ram等。/n請(qǐng)輸入電影地址','Http://');
得到用戶(hù)輸入的電影地址，考慮到項(xiàng)目進(jìn)度要求，沒(méi)有采用圖片庫(kù)那種方式，而是直接輸入電影網(wǎng)址的方式。

按鈕做好了，如何讓它出現(xiàn)在工具欄呢？好辦。
搜索InsertImageFromGallery，我只要找到人家怎么加的，我就可以加了。
結(jié)果只出來(lái)13個(gè)結(jié)果，看到其中有幾個(gè)是Support/ToolbarGenerator.cs，可以肯定，就是這了。

點(diǎn)擊搜索結(jié)果，可以看到如下代碼：
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";?

用過(guò)FreeTextBox的朋友都知道，FreeTextBox有幾種工具欄的模式，顯然，這里就是定義不同工具欄出現(xiàn)不同按鈕的地方，除了最后一種很少按鈕的模式以外，其它的都有InsertImageFromGallery，而CSDN的工具欄里面沒(méi)有從圖片庫(kù)插入圖片這個(gè)按鈕，看來(lái)我們CSDN的開(kāi)發(fā)人員也已經(jīng)改過(guò)這些代碼：）

上面的代碼只不過(guò)是定義一些字符串，肯定還有解析的地方，在搜索結(jié)果里，還有這么一段：
case "insertimagefromgallery":
???????? return ToolbarItems.InsertImageFromGallery;
是了，就是在這里解析的。于是，再次依樣畫(huà)葫蘆，加入如下代碼
case "insertmovie":
???????? return ToolbarItems.InsertMovie;

同時(shí)，修改定義部分為：
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,

編譯，一次通過(guò)，把生產(chǎn)的FreeTextBox.DLL復(fù)制到項(xiàng)目文件夾，一運(yùn)行發(fā)表文章,成功!

效果如下圖:

圖中用黃圈圈起來(lái)的按鈕就是我們?cè)黾拥陌l(fā)布電影功能，試一下，你也可以為FreeTextBox增加各種各樣的功能，開(kāi)發(fā)出獨(dú)具個(gè)性的產(chǎn)品：）