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增加各種各樣的功能，開發出獨具個性的產品：）