Download the HtmlEditor control
Html Editor
Html WinForms Editor
Html Editor Goals
Html Editor Non-Goals
Html Editor API
Html Editor Properties
Html Editor Operations
Enumerations
Value Types
Events
Visual Elements
Dialogs
Toolbars
Context Menus
The purpose of the Html Editor is to provide Html Editing capabilities within a
WinForms control. The control should emulate the operations that are available within
a Rich Text control, but have information persisted and restored from an Html BODY
element.
The purpose of the Html Editor is to provide a control that allows for Html editing
satisfying the requirements of input for rich text layouts and simple portal type
information. Examples of the former are case where the Rich Text control would normally
be utilized; documentation, complex descriptions where text formatting is required,
correspondences, bulletins, etc. Examples of the latter case are such items as dashboards;
news clips, announcements, company references, etc. These are defined by cases where
complex layouts are required that may include images and links.
High level design goals are:
1. Provides
robust WYSIWYG editing capabilities whose contents are persisted in HTML format.
2. Is easily
reusable in other projects.
3. Provides
methods for saving HTML files to and loading files from disk (with the appropriate
security demands).
The basic operations of the control are thus defined as:
Standard Text Editing
1.
Support basic formatting commands such as Bold, Italic, Underline, Strikeout,
Font Name, Font Size, Font Color, Justification (Left, Right, and Center), Bullets
and Number Lists.
Dialogs should be presented to the user for modifying Font and Color attributes.
2. Provide for
standard Cut, Copy, Paste, Undo, Redo, Select All, and commands.
3. Allow for
the inserting and removing indentation.
4. Allow the
inclusion of images along with alternative text and text alignment options.
5. Allow for
the insertion of web links (Anchor tags), including the definition of the target
frame.
6. Allow for
the insertion of a horizontal line for text separation.
7. Provide a
Find and Replace mechanisms. This dialog should highlight the appropriate text upon
a find, and support a Replace All operation.
8. Provide an
integrated toolbar to perform the standard text editing functions, and other essential
functions (as listed in the above points).
9. Allow for
the Insert mode (overwrite), word wrapping options to be toggled, and the visibility
of scroll bars to be defined.
10. Allow the use of context menus that
include all the required text formatting commands. The context menu should be sensitive
to the user’s selection.
11. Allow for the insert, removal, and
property definition of tables.
Body Properties
12. Have the ability to simply set the
text of the document body, the inner text of an Html Document; a browsable designer
property.
13. Allow for the assignment of the
complete Body element (Body outer Html), preserving and body properties. Also allow
for the assignment of the Body contents, Body inner Html.
14. Support the inclusion of Headings
and Formatted blocks of text. This operation should be able to be performed in reverse;
set to Normal style.
15. Have the ability to define the default
body background and foreground colors.
16. Allow for the ability of the Html
content to be viewed or edited directly.
17. Allow for the pasting of Text and
Html Markup.
External Behavior
18. Allow a reference to a stylesheet
to be applied to the document at runtime.
The purpose is to allow the definition of a corporate wide stylesheet that all documents
should reference for standardizing fonts, colors, etc.
19. Allow a reference to a script source
file to be applied to the document at runtime.
The purpose is to allow the use of a corporate script file that can be used for
handling links requiring programmatic redirection.
20. Allow for the ability to ensure
all links are forwarded to a new browser window; and not rendered within the window
containing the original link.
21. Allow a document to be loaded by
a given URL.
The Html Editor is not designed to provide similar functionality to Html Editor
Products; such as Microsoft FrontPage. For complex layout requiring Styles, Absolute
Positing, Frames, Multi-Media, etc, these products should be utilized.
Operations that the control does not support are thus defined as:
1. The toolbar
is non interactive in that it does not toggle Bold, Underline, and Italic state
based on the user selection.
2. Support is
only included for a single Font selection and not Font Families.
3. Support for
2D-Position, Absolute Position, and Live Resize is not included.
4. Multiple
Selections of items is not supported and all operations are based on a single selected
control.
5. Simple Font
properties are used rather than style attributes. The inclusion of style attributes
brings around complexity regarding the use of Span tags.
6. There was
the option to have the control be Tab driven; supporting Design, Edit Html, and
Preview. This would then have made the control look more like a fully-functional
Html editor rather than a replacement to the Rich Text Box.
Textual Properties:
|
Name
|
Type
|
Browsable
|
Description
|
|
InnerText
|
String
|
DesignOnly
|
Defines the Initial Body Text from the designer;
Ignores Html Markup.
|
|
InnerHtml
|
String
|
No
|
The Inner Html of the Html Body content.
|
|
BodyHtml
|
String
|
No
|
The Outer Html of the Html Body content.
Used to define new Body contents. Once set the ReadOnly and Body Properties should
be reset based on there original values.
|
|
DocumentHtml
|
String
|
No
|
The complete Html including the HEAD and BODY tags.
Property is Read Only.
|
|
SelectedText
|
String
|
No
|
Insert the given Text over the selected text; or
current insertion point.
|
|
SelectedHtml
|
String
|
No
|
Insert the given Html over the selected text; or
current insertion point.
|
|
DocumentUrl
|
String
|
No
|
The Url that was used to load the current document;
if any.
|
Body Properties:
|
Name
|
Type
|
Browsable
|
Description
|
|
BodyBackColor
|
Color
|
Yes
|
Defines the Background Color of the Html content.
Default value should be based on the associated form property; Ambient.
|
|
BodyForeColor
|
Color
|
Yes
|
Defines the Foreground Color of the Html content.
Default value should be based on the associated form property; Ambient.
|
|
BodyFont
|
HtmlFontProperty
|
Yes
|
Defines the base font attributes for the Html content.
Default value should be based on the associated form property; Ambient.
|
Runtime Display Properties:
|
Name
|
Type
|
Browsable
|
Description
|
|
ScrollBars
|
DisplayScrollBarOption
|
Yes
|
Controls the display of the Scroll Bars.
|
|
AutoWordWrap
|
Boolean
|
Yes
|
Controls the Auto Wrapping of content.
|
|
NavigateAction
|
NavigateActionOption
|
Yes
|
Window into which to load a Href link.
|
|
ReadOnly
|
Boolean
|
Yes
|
Marks the content as ReadOnly; not editable.
|
|
ToolbarVisible
|
Boolean
|
Yes
|
Visible state of the Html editor toolbar.
|
|
EnableVisualStyles
|
Boolean
|
Yes
|
Indicates if the Control Flat Style is set to System
or Standard for all dialogs
|
|
ToolbarDock
|
DockStyle
|
Yes
|
Defines the docking location of the editor toolbar.
|
Document Processing Operations:
|
Prototype
|
Description
|
|
void OpenFilePrompt()
|
Present the user with the system OpenFileDialog
from which they can select an Html file. Upon selection load the contents into the
Html body.
|
|
void SaveFilePrompt()
|
Present the user with the system SaveFileDialog
from which they can select an Html file. Upon selection persist the Html body as
an Html file.
|
|
void NavigateToUrl(string url)
|
Allows the loading of a document through Navigation of a Page
Href.
|
|
void LoadFromUrl(string href)
|
Allow the loading of a document through obtaining
the Html stream and setting the editor body.
|
void LoadFromFile
(string filename)
|
Allows the loading of a document through loading of a given file
name.
|
|
void LinkStyleSheet
(string stylesheetHref)
|
Allow the definition of a style sheet Href to be
used for the document.
Only a single stylesheet is supported to allow for standard visual templates to
be applied.
|
|
string GetStyleSheetHref()
|
Return to the user the style sheet Href being used.
|
|
void LinkScriptSource
(string scriptSource)
|
Allow the definition of a script element that is
to be used by the document.
Only a single script source is supported to allow for standard processing templates
to be applied.
|
|
string GetScriptBlockSource()
|
Return to the user the script block source being
used.
|
|
void HtmlContentsEdit()
|
Allow the user to edit the contents of the Body
Html. A dialog is to be presented with the Body Html upon which the appropriate
contents are replaced.
|
|
void HtmlContentsView()
|
Allow the user to view the complete Html markup;
including the Head and Body tags.
|
|
void DocumentPrint()
|
Print the Html text using the document print command;
print preview not being supported.
|
|
void ToggleOverWrite()
|
Toggle the document overwrite mode.
|
Document Text Operations:
|
Prototype
|
Description
|
|
void TextCut()
|
Cut the currently selected text to the clipboard.
|
|
void TextCopy()
|
Copy the currently selected text to the clipboard.
|
|
void TextPaste()
|
Paste the currently selected text from the clipboard.
|
|
void TextDelete()
|
Delete the currently selected text from the document.
|
|
void TextSelectAll()
|
Select the entire document contents.
|
|
void TextClearSelect()
|
Clear the current document selection.
|
|
void EditUndo()
|
Undo former editing operation.
|
|
void EditRedo()
|
Redo former Undo.
|
Selected Text Formatting Operations:
|
Prototype
|
Description
|
|
void FormatFontName(string name)
|
Set the Font name of the selected text.
|
|
void FormatFontSize
(HtmlFontSize size)
|
Set the Font size of the selected text.
|
|
void FormatBold()
|
Set the Font Bold attribute of the selected text.
|
|
void FormatUnderline()
|
Set the Font Underline attribute of the selected
text.
|
|
void FormatItalic()
|
Set the Font Italic attribute of the selected text.
|
|
void FormatSubscript()
|
Set the Font Subscript attribute of the selected
text.
|
|
void FormatSuperscript()
|
Set the Font Superscript attribute of the selected
text.
|
|
void FormatStrikeout ()
|
Set the Font Strike Through attribute of the selected
text.
|
|
void FormatFontIncrease()
|
Increase the font size of the selected text font
by one Html font size.
|
|
void FormatFontDecrease()
|
Decrease the font size of the selected text font
by one Html font size.
|
|
void FormatRemove()
|
Remove any formatting tags from the selected text.
|
|
void FormatTabRight()
|
Tab the current selected line to the right; Indent.
|
|
void FormatTabLeft()
|
Tab the current selected line to the left; Outdent.
|
|
void FormatList
(HtmlListType listtype)
|
Mark the selected text as an ordered or unordered
list.
|
|
void JustifyLeft()
|
Define the font justification of the selected text
as Left justified.
|
|
void JustifyCenter()
|
Define the font justification of the selected text
as Center justified.
|
|
void JustifyRight()
|
Define the font justification of the selected text
as Right justified.
|
Object Insert Operations:
|
Prototype
|
Description
|
|
void InsertLine()
|
Insert a horizontal Line at the selected insertion
point; or over the selected text.
|
|
void InsertImage
(string imageLocation)
|
Insert an Image at the selected insertion point;
or over the selected text/control.
|
|
void InsertImagePrompt()
|
Insert an Image at the selected insertion point,
or over the selected text/control, prompting the user for the Image attributes.
If an Image is currently selected the attributes should be defined based on the
selection.
|
|
void InsertLink(string href)
|
Insert a Link Reference at the selected insertion
point; using the selected text as the description text.
|
|
void InsertLinkPrompt()
|
Insert a Link Reference at the selected insertion
point, or over the selected text, prompting the user for the Href attributes. If
a Href is currently selected the attributes should be defined based on the selection.
|
|
void RemoveLink()
|
Remove any link references contained within the
selected text.
|
Text Insert Operations:
|
Prototype
|
Description
|
|
void InsertHtmlPrompt()
|
Insert the given Html over the selected text; or
current insertion point; prompting the user for the Html.
|
|
void InsertTextPrompt()
|
Insert the given Text over the selected text; or
current insertion point; prompting the user for the Text.
|
|
string[] GetFormatBlockCommands()
|
Returns the acceptable values for the possible Format
Block commands.
|
|
void InsertFormatBlock
(string command)
|
Formats the selected text with the given Format
Block; possible values are defined by the GetFormatBlockCommands.
|
|
void InsertFormattedBlock()
|
Formats the selected text with the Formatted Format
Block; PRE tag.
|
|
pulic void InsertNormalBlock()
|
Removes and Format Block commands from the selected
text.
|
|
void InsertHeading
(HtmlHeadingType headingType)
|
Formats the selected text with the Heading Format
Block; H1, H2, H3, H4, H5 tag.
|
System Prompt Dialog Functions:
|
Prototype
|
Description
|
|
void SystemInsertImage()
|
Allows the insertion of an Image using the system
dialogs.
|
|
void SystemInsertLink()
|
Allows the insertion of a Href using the system
dialogs.
|
Font and Color Processing Operations:
|
Prototype
|
Description
|
|
void FormatFontAttributes
(HtmlFontProperty font)
|
Using the mshtml commands apply the font attributes
to the selected text.
|
|
void FormatFontColor(Color color)
|
Using the mshtml commands apply the color value
to the selected text.
|
|
void FormatFontAttributesPrompt()
|
Present to the user a dialog for font attributes;
basing initial values from the currently selected text.
Upon completion apply the font attributes to the selected text.
|
|
void FormatFontColorPrompt()
|
Present to the user a dialog for color selection;
basing initial values from the currently selected text.
Upon completion apply the color value to the selected text.
|
|
HtmlFontProperty GetFontAttributes()
|
Determine the font attributes of the currently selected
text.
|
|
bool IsFontBold()
|
Determine if the selected text is Bold.
|
|
bool IsFontUnderline()
|
Determine if the selected text is Underline.
|
|
bool IsFontItalic()
|
Determine if the selected text is Italic.
|
|
bool IsFontStrikeout()
|
Determine if the selected text is Strikeout.
|
|
bool IsFontSuperscript()
|
Determine if the selected text is Superscript.
|
|
bool IsFontSubscript()
|
Determine if the selected text is Subscript.
|
Find and Replace Operations:
|
Prototype
|
Description
|
|
void FindReplacePrompt()
|
Present the user with a dialog to allow standard
find and replace operations on the document text.
|
|
void FindReplaceReset()
|
Initializes and Find and Replace operations; to
being at the start of the document.
|
|
bool FindFirst(string findText)
|
Finds the first occurrence of the given string within
the document.
Partial words are acceptable and case is ignored.
|
|
bool FindFirst(string findText,
bool matchWhole, bool matchCase)
|
Finds the first occurrence of the given string within
the document.
|
|
bool FindNext(string findText)
|
Finds the next occurrence of the given string within
the document; based on the last successful find operation.
Partial words are acceptable and case is ignored.
|
|
bool FindNext(string findText,
bool matchWhole, bool matchCase)
|
Finds the next occurrence of the given string within
the document; based on the last successful find operation.
|
|
bool FindReplaceOne(string findText,
string replaceText);
|
Replaces the given occurrence of the given string
within the document; based on the last successful find or replace operation.
Partial words are acceptable and case is ignored.
|
|
bool FindReplaceOne(string findText,
string replaceText,
bool matchWhole, bool matchCase)
|
Replaces the given occurrence of the given string
within the document; based on the last successful find or replace operation.
|
|
bool FindReplaceAll(string findText,
string replaceText)
|
Replaces all occurrences of the given string within
the document; based on the last successful find or replace operation.
Partial words are acceptable and case is ignored.
|
|
bool FindReplaceAll(string findText,
string replaceText,
bool matchWhole, bool matchCase)
|
Replaces all occurrences of the given string within
the document; based on the last successful find or replace operation.
|
Table Processing Operations:
|
Prototype
|
Description
|
|
void TableInsertPrompt()
|
Insert a Table at the selected insertion point,
or over the selected text/control, prompting the user for the Table attributes.
If a Table is currently selected the table attributes should be defined based on
the selection.
|
|
bool TableModifyPrompt()
|
Modify the Table at the selected insertion point,
or the selected table, prompting the user for the Table attributes. The table attributes
should be defined based on the selection.
|
|
void
TableInsert
(HtmlTableProperty tableProperties)
|
Insert a Table at the current insert point; or over
the selected text/control.
|
|
bool
TableModify
(HtmlTableProperty tableProperties)
|
Modify the Table at the current insert point, or
selected table.
|
|
void TableInsertRow()
|
Insert a new row into the table based on the current user row
and insertion after.
|
|
void TableDeleteRow()
|
Delete the existing row from the table based on the current user
row position.
|
void GetTableDefinition(
out HtmlTableProperty table,
out bool tableFound);
|
Determine if the current insertion point or selected
text is contained with a Table element; upon which return the selected table properties.
|
The following table list the enumerations used to define Html properties:
|
Name
|
Description
|
Values
|
|
HtmlListType
|
Defines the type of list to be inserted.
|
Ordered
Unordered
|
|
HtmlHeadingType
|
Defines the type of Html Heading to mark text selection.
|
H1
H2
H3
H4
H5
|
|
HtmlFontSize
|
Defines the acceptable values of the size of the
FONT.
|
Default
xxSmall
xSmall
Small
Medium
Large
xLarge
xxLarge
|
|
NavigateActionOption
|
Defines the navigation window action on a user clicking
a Href.
|
Default
NewWindow
SameWindow
|
|
ImageAlignOption
|
Defines the image alignment property.
|
AbsBottom
AbsMiddle
Baseline
Bottom
Left
Middle
Right
TextTop
Top
|
|
HorizontalAlignOption
|
Define the horizontal alignment property.
|
Default
Left
Center
Right
|
|
VerticalAlignOption
|
Define the vertical alignment property.
|
Default
Top
Bottom
|
|
DisplayScrollBarOption
|
Defines the visibility of the scrollbars.
|
Yes
No
Auto
|
|
MeasurementOption
|
Defines the unit of measure for font attributes.
|
Pixel
Percent
|
In support of these two values types there are supporting classes to perform conversion
from the enumeration values to and from the Html attribute and style properties.
HtmlFontProperty Struct:
The main purpose of the struct is to be used in replacement of the Framework Font
class. The class restricts the acceptable font sizes and extends the attributes.
|
Property
|
Type
|
Description
|
|
Name
|
String
|
Name of the Font.
|
|
Size
|
HtmlFontSize
|
Size of the Font.
|
|
Bold
|
Boolean
|
Bold Indicator.
|
|
Italic
|
Boolean
|
Italic Indicator.
|
|
Underline
|
Boolean
|
Underline Indicator.
|
|
Strikeout
|
Boolean
|
Strikeout Indicator.
|
|
Subscript
|
Boolean
|
Subscript Indicator.
|
|
Superscript
|
Boolean
|
Superscript Indicator.
|
HtmlTableProperty Struct:
The main purpose of the struct is to be used in defining the properties supported
for the insertion and maintenance of Html Tables.
|
Property
|
Type
|
Description
|
|
CaptionText
|
String
|
Caption for the Table.
|
|
CaptionAlignment
|
HorizontalAlignOption
|
Alignment of the Table caption.
|
|
CaptionLocation
|
VerticalAlignOption
|
Location of the Table caption; top or bottom.
|
|
BorderSize
|
Byte
|
Width of the border.
|
|
TableAlignment
|
HorizontalAlignOption
|
Alignment of the table on the page.
|
|
TableRows
|
Byte
|
Number of rows in the Table.
|
|
TableColumns
|
Byte
|
Number of columns in the Table.
|
|
TableWidth
|
UInt16
|
Width of the Table on the page.
|
|
TableWidthMeasurement
|
MeasurementOption
|
Measurement option for the Table width; percent
or pixels.
|
|
CellPadding
|
Byte
|
Padding of the Table cells.
|
|
CellSpacing
|
Byte
|
Spacing of the Table cells.
|
The following table list the events raised by the Html Editor:
|
Name
|
Description
|
Arguments
|
|
HtmlException
|
Raised when an error is captured from an operation
performed internally within the control; such as clicking on a context menu or toolbar.
If no event is captured an internal message box should be displayed.
|
String OperatonException ExceptionObject
|
The following table lists the dialogs to be presented to the user by the Html Editor.
This does not include system defined dialogs; such as the OpenFileDialog and SaveFileDialog:
|
Name
|
Caller
|
Purpose
|
|
EditHtml
|
HtmlContentsEdit
|
Allow the user to edit the contents of the Body
Html.
|
|
ViewHtml
|
HtmlContentsView
|
Allow the user to view the complete Html markup.
|
|
EnterHref
|
InsertLinkPrompt
|
Allow the properties of a Href to be defined.
|
|
EnterImage
|
InsertImagePrompt
|
Allow the properties of an Image to be defined.
|
|
FontAttribute
|
FormatFontAttributesPrompt
|
Allow the Font properties of the selected text to
be defined.
|
|
TableProperty
|
InsertTablePrompt
|
Allow the properties of a Table to be defined.
|
|
FindReplace
|
FindReplacePrompt
|
Allow interaction for Find and Replace operations.
|
The following table lists the operations to be included within a standard toolbar:
|
Operation
|
Purpose
|
|
TextCut
|
Cut selected text.
|
|
TextCopy
|
Copy selected text.
|
|
TextPaste
|
Paste from the clipboard.
|
|
EditUndo
|
Undo last operation.
|
|
EditRedo
|
Redo last Undo.
|
|
FormatBold
|
Bold selected text.
|
|
FormatUnderline
|
Underline selected text.
|
|
FormatItalic
|
Italicize selected text.
|
|
FormatFontAttributesPrompt
|
Present user with internal font dialog and mark
selected text with the associated attributes.
|
|
FormatRemove
|
Remove font attributes from the selected text.
|
|
FormatFontColorPrompt
|
Present user with color dialog and mark selected
text with the associated color.
|
|
FormatFontIncrease
|
Increase the size of the selected text.
|
|
FormatFontDecrease
|
Increase the size of the selected text.
|
|
JustifyLeft
|
Mark selected text as justified Left.
|
|
JustifyCenter
|
Mark selected text as justified Center.
|
|
JustifyRight
|
Mark selected text as justified Right.
|
|
FormatTabRight
|
Indent selected text.
|
|
FormatTabLeft
|
Outdent selected text.
|
|
FormatList(HtmlListType.Ordered)
|
Mark selected text as an ordered list.
|
|
FormatList(HtmlListType.Unordered)
|
Mark selected text as an un-ordered list.
|
|
InsertLine
|
Insert a line over the user’s selection.
|
|
InsertImagePrompt
|
Prompt the user for Image properties and insert
over the user’s selection.
|
|
InsertTablePrompt
|
Prompt the user for Table properties and insert
over the user’s selection.
|
|
InsertHrefPrompt
|
Prompt the user for Href properties and insert over
the user’s selection.
|
|
FindReplacePrompt
|
Present the user with a Find and Replace dialog.
|
|
DocumentPrint
|
Print the current document.
|
Whilst in EDIT mode the Html editor should replace the standard context menu; with
one designed to work with the Html Editor. The new context menu should support all
for all the standard text operations, allow for the markup of formatting blocks,
and allow for the insert of supported objects (line, image, table, links)
Document specific commands should be available for setting the status of toolbars,
scrollbars, and word wrapping. In addition the document commands should support
open and saving the Html contents.