When I first started to try FTB2.0, I felt that FTB was really awesome. Actually, What you see is what you get in the webpage status. After reading the FTB documentation (in fact, it is not a lot of things, it is estimated that the SDK documentation is generated using an NDOC or similar tool), I tried several programs carefully, I think the implementation of FTB is not complicated, but it is very clever. Through the intermediate part of FTB, the client (browser) Program (javascript code) and background program (aspx written by C #, etc. ASP. NET Code) to achieve this WYSIWYG effect.
The structure of FTB consists of three namespaces:
FreeTextBoxControls, FreeTextBoxControls. Design, and FreeTextBoxControls. Support.
FreeTextBoxControls is the most used. Basically, all the interface components used come from here. For example, the ing can be found for each function Button on the ToolBar, each Button corresponds to a function in javascrip.
For example, the Underline function has an Underline class (inherited from ToolbarButton) implementation that actually calls a piece of javascript code FTB_Underline (in the FreeTextBox-ToolbarItemsSrcipt.js) on the client ).
Function FTB_Underline (ftbName ){
FTB_Format (ftbName, 'underline ');
If you go further, follow the js Code carefully and it can call the FTB_Format code (in the FreeTextBox-MainScript.js ).
Function FTB_Format (ftbName, commandName ){
Editor = FTB_GetIFrame (ftbName );
If (FTB_IsHtmlMode (ftbName) return;
Editor. focus ();
Editor.document.exe cCommand (commandName, '', null );
}
It achieves the effect through the execCommand method of document. By checking the MSDN document, we can find that it is the command parameter of Underline.
ExecCommand can execute command parameters:
Command Identifiers
2D-Position
Allows absolutely positioned elements to be moved by dragging.
AbsolutePosition
Sets an element's position property to "absolute ."
BackColor
Sets or retrieves the background color of the current selection.
BlockDirLTR
Not currently supported.
BlockDirRTL
Not currently supported.
Bold
Toggles the current selection between bold and nonbold.
BrowseMode
Not currently supported.
ClearAuthenticationCache
Clears all authentication credentials from the cache. Applies only to execCommand.
Copy
Copies the current selection to the clipboard.
CreateBookmark
Creates a bookmark anchor or retrieves the name of a bookmark anchor for the current selection or insertion point.
CreateLink
Inserts a hyperlink on the current selection, or displays a dialog box enabling the user to specify a URL to insert as a hyperlink on the current selection.
Cut
Copies the current selection to the clipboard and then deletes it.
Delete
Deletes the current selection.
DirLTR
Not currently supported.
DirRTL
Not currently supported.
EditMode
Not currently supported.
FontName
Sets or retrieves the font for the current selection.
FontSize
Sets or retrieves the font size for the current selection.
ForeColor
Sets or retrieves the foreground (text) color of the current selection.
FormatBlock
Sets the current block format tag.
Indent
Increases the indent of the selected text by one indentation increment.
InlineDirLTR
Not currently supported.
InlineDirRTL
Not currently supported.
InsertButton
Overwrites a button control on the text selection.
InsertFieldset
Overwrites a box on the text selection.
InsertHorizontalRule
Overwrites a horizontal line on the text selection.
InsertIFrame
Overwrites an inline frame on the text selection.
InsertImage
Overwrites an image on the text selection.
InsertInputButton
Overwrites a button control on the text selection.
InsertInputCheckbox
Overwrites a check box control on the text selection.
InsertInputFileUpload
Overwrites a file upload control on the text selection.
InsertInputHidden
Inserts a hidden control on the text selection.
InsertInputImage
Overwrites an image control on the text selection.
InsertInputPassword
Overwrites a password control on the text selection.
InsertInputRadio
Overwrites a radio control on the text selection.
InsertInputReset
Overwrites a reset control on the text selection.
InsertInputSubmit
Overwrites a submit control on the text selection.
InsertInputText
Overwrites a text control on the text selection.
InsertMarquee
Overwrites an empty marquee on the text selection.
InsertOrderedList
Toggles the text selection between an ordered list and a normal format block.
InsertParagraph
Overwrites a line break on the text selection.
InsertSelectDropdown
Overwrites a drop-down selection control on the text selection.
InsertSelectListbox
Overwrites a list box selection control on the text selection.
InsertTextArea
Overwrites a multiline text input control on the text selection.
InsertUnorderedList
Toggles the text selection between an ordered list and a normal format block.
Italic
Toggles the current selection between italic and nonitalic.
JustifyCenter
Centers the format block in which the current selection is located.
JustifyFull
Not currently supported.
JustifyLeft
Left-justifies the format block in which the current selection is located.
JustifyNone
Not currently supported.
JustifyRight
Right-justifies the format block in which the current selection is located.
LiveResize
Causes the MSHTML Editor to update an element's appearance continuously during a resizing or moving operation, rather than updating only at the completion of the move or resize.
MultipleSelection
Allows for the selection of more than one site selectable element at a time when the user holds down the SHIFT or CTRL keys.
Open
Not currently supported.
Outdent
Decreases by one increment the indentation of the format block in which the current selection is located.
OverWrite
Toggles the text-entry mode between insert and overwrite.
Paste
Overwrites the contents of the clipboard on the current selection.
PlayImage
Not currently supported.
Print
Opens the print dialog box so the user can print the current page.
Redo
Not currently supported.
Refresh
Refreshes the current document.
RemoveFormat
Removes the formatting tags from the current selection.
RemoveParaFormat
Not currently supported.
SaveAs
Saves the current Web page to a file.
SelectAll
Selects the entire document.
SizeToControl
Not currently supported.
SizeToControlHeight
Not currently supported.
SizeToControlWidth
Not currently supported.
Stop
Not currently supported.
StopImage
Not currently supported.
StrikeThrough
Not currently supported.
Subscript
Not currently supported.
Superscript
Not currently supported.
UnBookmark
Removes any bookmark from the current selection.
Underline
Toggles the current selection between underlined and not underlined.
Undo
Not currently supported.
Unlink
Removes any hyperlink from the current selection.
Unselect
Clears the current selection.
Basically, each command parameter can find the corresponding implementation class in FreeTextBoxControls of FTB. If you think that some of them are not implemented, it is very easy and convenient to add them by referring to the implemented functions.
FTB also provides public interfaces. For example, tools and buttons inherited from ToolbarButton can be implemented, while ToolbarDropDownList can be used to implement drop-down selection (such as font selection ), the corresponding javascript method only needs to pass the corresponding method name string to the class. The self-written javascript can be placed in js, or in the string parameter of ScriptBlock. The former cannot be seen in the source code at the front end, the latter returns the entire function source code, making everything very public and convenient.
Is this idea similar to ASP. NET?
Because javascript can be supported by a variety of browsers (it is estimated that some minor compatibility issues can be achieved through javascript), FTB can work normally in multiple environments. This blog system (. text) FTB is also used, but the version is 1.6.3.26037 (Chinese version). If you are interested, you can view the source code of the webpage at the place where the article is published, and you will find a lot of FTB_XXX javascript Functions. These In 2.0 has all been concentrated in the FreeTextBox-ToolbarItemsSrcipt.js and FreeTextBox-MainScript.js, it should be said that this is more centralized.
If you are worried that the free FTB protocol has some impact on the commercial use, it is not difficult to develop a WYSIWYG editor control suitable for your product based on this idea.
