剛開始試用FTB2.0的時候，感覺FTB真的很神，居然可以在網頁狀態實現編輯過程的What?you?see?is?what?you?get。看完FTB的文檔（其實也不是很多的東西，估計就是用個NDOC或者什么類似的工具生成的SDK文檔）又仔細試做了幾個程序，覺得FTB的實現思路不復雜，但十分巧妙。它通過FTB這個中間部件將客戶端（瀏覽器）的程序（javascript代碼）和后臺程序（C#寫的aspx等ASP.NET代碼）緊密結合，從而實現了這種所見即所得的效果。

FTB的結構主要有三個命名空間組成：
FreeTextBoxControls，FreeTextBoxControls.Design和FreeTextBoxControls.Support。

???????使用得最多的是FreeTextBoxControls，基本上用到的界面部件都來自于這里，例如ToolBar上每個功能Button可以在這里找到映射，而每個Button又對應著javascrip中的一個函數功能。

例如：下劃線這個功能，有個Underline的類（繼承于ToolbarButton）實現，而這個類實際調用客戶端的一段javascript代碼FTB_Underline（在FreeTextBox-ToolbarItemsSrcipt.js中）。


function?FTB_Underline(ftbName)?{?
????FTB_Format(ftbName,'underline');?

????????如果再深究下去，仔細跟蹤下這段js的代碼又可以它調用FTB_Format這段代碼（在FreeTextBox-MainScript.js中）。


function?FTB_Format(ftbName,commandName)?{
????editor?=?FTB_GetIFrame(ftbName);

????if?(FTB_IsHtmlMode(ftbName))?return;
????editor.focus();
????editor.document.execCommand(commandName,'',null);

}

它正是通過document的execCommand方法來實現效果的，查MSDN文擋可以發現它對應執行的正是Underline的命令參數。

execCommand可以執行的命令參數：

2D-Position?允許通過拖曳移動絕對定位的對象。?
AbsolutePosition?設定元素的?position?屬性為“absolute”(絕對)。?
BackColor?設置或獲取當前選中區的背景顏色。?
BlockDirLTR?目前尚未支持。?
BlockDirRTL?目前尚未支持。?
Bold?切換當前選中區的粗體顯示與否。?
BrowseMode?目前尚未支持。?
Copy?將當前選中區復制到剪貼板。?
CreateBookmark?創建一個書簽錨或獲取當前選中區或插入點的書簽錨的名稱。?
CreateLink?在當前選中區上插入超級鏈接，或顯示一個對話框允許用戶指定要為當前選中區插入的超級鏈接的?URL。?
Cut?將當前選中區復制到剪貼板并刪除之。?
Delete?刪除當前選中區。?
DirLTR?目前尚未支持。?
DirRTL?目前尚未支持。?
EditMode?目前尚未支持。?
FontName?設置或獲取當前選中區的字體。?
FontSize?設置或獲取當前選中區的字體大小。?
ForeColor?設置或獲取當前選中區的前景(文本)顏色。?
FormatBlock?設置當前塊格式化標簽。?
Indent?增加選中文本的縮進。?
InlineDirLTR?目前尚未支持。?
InlineDirRTL?目前尚未支持。?
InsertButton?用按鈕控件覆蓋當前選中區。?
InsertFieldset?用方框覆蓋當前選中區。?
InsertHorizontalRule?用水平線覆蓋當前選中區。?
InsertIFrame?用內嵌框架覆蓋當前選中區。?
InsertImage?用圖像覆蓋當前選中區。?
InsertInputButton?用按鈕控件覆蓋當前選中區。?
InsertInputCheckbox?用復選框控件覆蓋當前選中區。?
InsertInputFileUpload?用文件上載控件覆蓋當前選中區。?
InsertInputHidden?插入隱藏控件覆蓋當前選中區。?
InsertInputImage?用圖像控件覆蓋當前選中區。?
InsertInputPassword?用密碼控件覆蓋當前選中區。?
InsertInputRadio?用單選鈕控件覆蓋當前選中區。?
InsertInputReset?用重置控件覆蓋當前選中區。?
InsertInputSubmit?用提交控件覆蓋當前選中區。?
InsertInputText?用文本控件覆蓋當前選中區。?
InsertMarquee?用空字幕覆蓋當前選中區。?
InsertOrderedList?切換當前選中區是編號列表還是常規格式化塊。?
InsertParagraph?用換行覆蓋當前選中區。?
InsertSelectDropdown?用下拉框控件覆蓋當前選中區。?
InsertSelectListbox?用列表框控件覆蓋當前選中區。?
InsertTextArea?用多行文本輸入控件覆蓋當前選中區。?
InsertUnorderedList?切換當前選中區是項目符號列表還是常規格式化塊。?
Italic?切換當前選中區斜體顯示與否。?
JustifyCenter?將當前選中區在所在格式化塊置中。?
JustifyFull?目前尚未支持。?
JustifyLeft?將當前選中區所在格式化塊左對齊。?
JustifyNone?目前尚未支持。?
JustifyRight?將當前選中區所在格式化塊右對齊。?
LiveResize?迫使?MSHTML?編輯器在縮放或移動過程中持續更新元素外觀，而不是只在移動或縮放完成后更新。?
MultipleSelection?允許當用戶按住?Shift?或?Ctrl?鍵時一次選中多于一個站點可選元素。?
Open?目前尚未支持。?
Outdent?減少選中區所在格式化塊的縮進。?
OverWrite?切換文本狀態的插入和覆蓋。?
Paste?用剪貼板內容覆蓋當前選中區。?
PlayImage?目前尚未支持。?
Print?打開打印對話框以便用戶可以打印當前頁。?
Redo?目前尚未支持。?
Refresh?刷新當前文檔。?
RemoveFormat?從當前選中區中刪除格式化標簽。?
RemoveParaFormat?目前尚未支持。?
SaveAs?將當前?Web?頁面保存為文件。?
SelectAll?選中整個文檔。?
SizeToControl?目前尚未支持。?
SizeToControlHeight?目前尚未支持。?
SizeToControlWidth?目前尚未支持。?
Stop?目前尚未支持。?
StopImage?目前尚未支持。?
StrikeThrough?目前尚未支持。?
Subscript?目前尚未支持。?
Superscript?目前尚未支持。?
UnBookmark?從當前選中區中刪除全部書簽。?
Underline?切換當前選中區的下劃線顯示與否。?
Undo?目前尚未支持。?
Unlink?從當前選中區中刪除全部超級鏈接。?
Unselect?清除當前選中區的選中狀態。?
?基本上每個命令參數都可以在FTB的FreeTextBoxControls中找到對應的實現類，如果覺得有些沒有實現，自己參照已經實現的功能來增加也十分簡單和方便。

????????FTB還提供了公開的接口，例如繼承于ToolbarButton可以實現對應的工具按鈕，繼承于ToolbarDropDownList則實現下拉式選擇（如選擇字體那種），對應javascript的方法只須傳遞對應的方法名字符串給類即可，自己寫的javascript可以放在js中，也可以放在ScriptBlock的字符串參數里面，前者前端查看源碼看不到，后者則將整個函數源碼傳回，一切都十分公開和方便。
????????這種思路是否也和ASP.NET的思路類似？
????????由于javascript可以被多種瀏覽器支持（估計有些小兼容問題，可以通過javascript來兼容），因此FTB可以在多種環境下正常工作。現在用的這個blog系統（.Text）也用了FTB，但版本是1.6.3.26037（漢化版），有興趣可以在發表文章的地方查看網頁源代碼看看，就會發現好多的FTB_XXX的javascript函數。這些在2.0已經全部集中放到FreeTextBox-ToolbarItemsSrcipt.js和FreeTextBox-MainScript.js中了，應該說這樣比較歸一些。

????????如果擔心FTB的免費協議對商業用途有些影響的話，自己根據這個思路來開發一個適合自己產品用的所見即所得編輯器控件應該也不是難事。

總結

以上是生活随笔為你收集整理的FreeTextBox实现机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。