動手擴充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增加各種各樣的功能，開發出獨具個性的產品：）
(文中代碼經複製後有些走樣，見諒)