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.

Html Editor Goals


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

  1. Have the ability to simply set the text of the document body, the inner text of an Html Document; a browsable designer property.
  2. 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.
  3. Support the inclusion of Headings and Formatted blocks of text. This operation should be able to be performed in reverse; set to
    Normal style.
  4. Have the ability to define the default body background and foreground colors.
  5. Allow for the ability of the Html content to be viewed or edited directly.
  6. Allow for the pasting of Text and Html Markup.

External Behavior

  1. 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.
  2. 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.
  3. 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.
  4. Allow a document to be loaded by a given URL.


HTML Editor Non Goals

The Html Editor is not designed to provide similar functionality to Html Editor Products. 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. Support is only included for a single Font selection and not Font Families.
  2. Support for 2D-Position, Absolute Position, and Live Resize is not included.
  3. Multiple Selections of items is not supported and all operations are based on a single selected control.
  4. Simple Font properties are used rather than style attributes. The inclusion of style attributes brings around complexity regarding the use of Span tags.
  5. 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.

Here is a complete set of documentation:

Html Editor Application.pdf

Here is the C# Public API

 

C#
Edit|Remove
using HtmlDocument = mshtml.HTMLDocument; 
using HtmlBody = mshtml.HTMLBody; 
using HtmlStyleSheet = mshtml.IHTMLStyleSheet; 
using HtmlStyle = mshtml.IHTMLStyle; 
using HtmlDomNode = mshtml.IHTMLDOMNode; 
using HtmlDomTextNode = mshtml.IHTMLDOMTextNode; 
using HtmlTextRange = mshtml.IHTMLTxtRange; 
using HtmlSelection = mshtml.IHTMLSelectionObject; 
using HtmlControlRange = mshtml.IHTMLControlRange; 
 
using HtmlEventObject = mshtml.IHTMLEventObj; 
 
using HtmlElement = mshtml.IHTMLElement; 
using HtmlElementCollection = mshtml.IHTMLElementCollection; 
using HtmlControlElement = mshtml.IHTMLControlElement; 
using HtmlAnchorElement = mshtml.IHTMLAnchorElement; 
using HtmlImageElement = mshtml.IHTMLImgElement; 
using HtmlFontElement= mshtml.IHTMLFontElement; 
using HtmlLineElement = mshtml.IHTMLHRElement; 
using HtmlSpanElement = mshtml.IHTMLSpanFlow; 
using HtmlScriptElement = mshtml.IHTMLScriptElement; 
 
using HtmlTable = mshtml.IHTMLTable; 
using HtmlTableCaption = mshtml.IHTMLTableCaption; 
using HtmlTableRow = mshtml.IHTMLTableRow; 
using HtmlTableCell = mshtml.IHTMLTableCell; 
using HtmlTableRowMetrics = mshtml.IHTMLTableRowMetrics; 
using HtmlTableColumn = mshtml.IHTMLTableCol; 
 
 
// UserControl class for the HtmlEditor 
public sealed class HtmlEditorControl : UserControl 
{ 
    // public event raised if an processing exception is found 
    [Category("Exception"), 
Description("An Internal Processing Exception was encountered")] 
    public event HtmlExceptionEventHandler HtmlException; 
 
    // public control constructor 
    public HtmlEditorControl(); 
 
    // create a new focus method that ensure the body gets the focus 
    // should be called when text processing command are called 
    public new bool Focus(); 
 
    // Runtime Display Properties 
 
    // defines the whether scroll bars should be displayed 
    [Category("RuntimeDisplay"), 
Description("Controls the Display of Scrolls Bars")] 
    [DefaultValue(DisplayScrollBarOption.Auto)] 
    public DisplayScrollBarOption ScrollBars; 
 
    // defines the whether words will be auto wrapped 
    [Category("RuntimeDisplay"), 
Description("Controls the auto wrapping of words")] 
    [DefaultValue(true)] 
    public bool AutoWordWrap;         
         
    // defines the default action when a user click on a link 
    [Category("RuntimeDisplay"), 
Description("Window to use when clicking a Href")] 
    [DefaultValue(NavigateActionOption.NewWindow)] 
    public NavigateActionOption NavigateAction; 
 
    // Defines the editable status of the text 
    [Category("RuntimeDisplay"), 
Description("Marks the content as ReadOnly")] 
    [DefaultValue(true)] 
    public bool ReadOnly; 
 
    // defines the visibility of the defined toolbar 
    [Category("RuntimeDisplay"), 
Description("Marks the toolbar as Visible")] 
    [DefaultValue(true)] 
    public bool ToolbarVisible; 
 
    // defines the flat style of controls for visual styles 
    [Category("RuntimeDisplay"), 
Description("Indicates if Control Flat Style is System")] 
    [DefaultValue(false)] 
    public bool EnableVisualStyles; 
 
    // defines the visibility of the defined toolbar 
    [Category("RuntimeDisplay"), 
Description("Defines the docking location of the toolbar")] 
    [DefaultValue(DockStyle.Bottom)] 
    public DockStyle ToolbarDock; 
 
    // Body Properties (Text and HTML) 
 
    // defines the base text for the body (design time only value) 
    // HTML value can be used at runtime 
    [Category("Textual"), 
Description("Set the initial Body Text")] 
    [DefaultValue("Html")] 
    public string InnerText; 
 
    // the HTML value for the body contents 
    // it is this value that gets serialized by the designer 
    [Category("Textual"), 
Description("The Inner HTML of the contents")] 
    [DesignerSerializationVisibility 
(DesignerSerializationVisibility.Hidden),Browsable(false)] 
    public string InnerHtml; 
 
    // returns and sets the body tag of the html 
    // on set the body attributes need to be defined 
    [Category("Textual"), 
Description("Complete Document including Body Tag")] 
    [DesignerSerializationVisibility 
(DesignerSerializationVisibility.Hidden), Browsable(false)] 
    public string BodyHtml; 
 
    // return the html tag of the document 
    // should never be set as contains the HEAD tag 
    [Category("Textual"), 
Description("Complete Document including Head and Body")] 
    [DesignerSerializationVisibility 
(DesignerSerializationVisibility.Hidden), Browsable(false)] 
    public string DocumentHtml; 
 
    // Body Properties (Font and Color) 
 
    // body background color 
    // reset and serialize values defined 
    [Category("Textual"), 
Description("Define the Background Color of the Body")] 
    public Color BodyBackColor; 
 
    // body foreground color 
    // reset and serialize values defined 
    [Category("Textual"), 
Description("Define the Foreground Color of the Body")] 
    public Color BodyForeColor; 
 
    // body font definition 
    // always set based on the controls font 
    [Category("Textual"), 
Description("Defines the base font name for the text")] 
    public HtmlFontProperty BodyFont; 
 
    // returns or sets the Text selected by the user 
    [Category("Textual"), 
Description("The Text selected by the User")] 
    [DesignerSerializationVisibility 
(DesignerSerializationVisibility.Hidden), Browsable(false)] 
    public string SelectedText; 
 
    // returns or sets the Html selected by the user 
    [Category("Textual"), 
 Description("The Text selected by the User")] 
    [DesignerSerializationVisibility 
(DesignerSerializationVisibility.Hidden), Browsable(false)] 
    public string SelectedHtml; 
 
    // returns any Url that was used to load the current document 
    [Category("Textual"), 
Description("Url used to load the Document")] 
    [DesignerSerializationVisibility 
(DesignerSerializationVisibility.Hidden), Browsable(false)] 
    public string DocumentUrl 
 
    // Document Processing Operations 
 
    // allow the user to select a file and read the contents 
    public void OpenFilePrompt() 
 
    // allow the user to persist the Html stream to a file 
    public void SaveFilePrompt() 
 
    // allow the user to load a document by navigation 
    public void NavigateToUrl(string url); 
 
    // allow the user to load a document by url 
    public void LoadFromUrl(string url); 
 
    // allow a user to load a file given a file name 
    public void LoadFromFile(string filename); 
 
    // define the style sheet to be used for editing 
    // can be used for standard templates 
    public void LinkStyleSheet(string stylesheetHref); 
 
    // return to the user the style sheet href being used 
    public string GetStyleSheetHref(); 
 
    // define a script element that is to be used by all documents 
    // can be sued for document processing 
    public void LinkScriptSource(string scriptSource); 
 
    // return to the user the script block source being used 
    public string GetScriptBlockSource(); 
 
    // allow the user to edit the raw HTML 
    // dialog presented and the body contents set 
    public void HtmlContentsEdit(); 
 
    // allow the user to view the html contents 
    // the complete Html markup is presented 
    public void HtmlContentsView(); 
 
    // print the html text using the document print command 
    // print preview is not supported 
    public void DocumentPrint(); 
 
    // toggle the overwrite mode 
    public void ToggleOverWrite(); 
 
    // Document Text Operations 
 
    // cut the currently selected text to the clipboard 
    public void TextCut(); 
 
    // copy the currently selected text to the clipboard 
    public void TextCopy(); 
 
    // paste the currently selected text from the clipboard 
    public void TextPaste(); 
 
    // delete the currently selected text from the screen 
    public void TextDelete(); 
 
    // select the entire document contents 
    public void TextSelectAll(); 
 
    // clear the document selection 
    public void TextClearSelect(); 
 
    // undo former commands 
    public void EditUndo(); 
 
    // redo former undo 
    public void EditRedo(); 
 
    // Selected Text Formatting Operations 
 
    // using the document set the font name 
    public void FormatFontName(string name); 
 
    // using the document set the Html font size 
    public void FormatFontSize(HtmlFontSize size); 
 
    // using the document toggles selection with a Bold tag 
    public void FormatBold(); 
 
    // using the document toggles selection with a Underline tag 
    public void FormatUnderline(); 
 
    // using the document toggles selection with a Italic tag 
    public void FormatItalic(); 
 
    // using the document toggles selection with a Subscript tag 
    public void FormatSubscript(); 
 
    // using the document toggles selection with a Superscript tag 
    public void FormatSuperscript(); 
 
    // using the document toggles selection with a Strikeout tag 
    public void FormatStrikeout(); 
 
    // increase the size of the font by 1 point 
    public void FormatFontIncrease(); 
 
    // decrease the size of the font by 1 point 
    public void FormatFontDecrease(); 
 
    // remove any formatting tags 
    public void FormatRemove(); 
 
    // Tab the current line to the right 
    public void FormatTabRight(); 
 
    // Tab the current line to the left 
    public void FormatTabLeft(); 
 
    // insert a ordered or unordered list 
    public void FormatList(HtmlListType listtype); 
     
    // define the font justification as LEFT 
    public void JustifyLeft(); 
 
    // define the font justification as CENTER 
    public void JustifyCenter(); 
 
    // define the font justification as Right 
    public void JustifyRight(); 
 
    // Object Insert Operations 
 
    // insert a horizontal line in the body 
    public void InsertLine(); 
 
    // insert an image tag at the selected location 
    public void InsertImage(string imageLocation); 
     
    // public function to insert a image and prompt user for the link 
    public void InsertImagePrompt(); 
 
    // create a web link from the users selected text 
    public void InsertLink(string href); 
     
    // public function to insert a link and prompt user for the href 
    public void InsertLinkPrompt(); 
 
    // remove a web link from the users selected text 
    public void RemoveLink(); 
 
    // Text Insert Operations 
 
    // insert the given HTML into the selected range 
    public void InsertHtmlPrompt(); 
     
    // insert the given Text into the selected range 
    public void InsertTextPrompt(); 
 
    // returns the acceptable values for the format block 
    public string[] GetFormatBlockCommands(); 
 
    // formats the selected text wrapping in the given format tag 
    public void InsertFormatBlock(string command); 
 
    // formats the selected text wrapping in a PRE tag 
    public void InsertFormattedBlock(); 
 
    // unformats the selected text removing heading and pre tags 
    public void InsertNormalBlock(); 
 
    // inserts a heading tag values Heading 1,2,3,4,5 
    public void InsertHeading(HtmlHeadingType headingType); 
 
    // System Prompt Dialog Functions 
         
    // allows the insertion of an image using the system dialogs 
    public void SystemInsertImage(); 
 
    // allows the insertion of an href using the system dialogs 
    public void SystemInsertLink(); 
 
    // Font and Color Processing Operations 
 
    // using exec command define font properties for selected tag 
    public void FormatFontAttributes(HtmlFontProperty font); 
 
    // using exec command define color properties for selected tag 
    public void FormatFontColor(Color color); 
 
    // display defined font dialog using to set selected text FONT 
    public void FormatFontAttributesPrompt(); 
 
    // display system color dialog and use to set selected text 
    public void FormatFontColorPrompt(); 
         
    // determine the Font of the selected text range 
    // set to the default value of not defined 
    public HtmlFontProperty GetFontAttributes(); 
 
    // determine if the current font selected is bold given a range 
    public bool IsFontBold(); 
 
    // determine if the current font selected is underline 
    public bool IsFontUnderline(); 
 
    // determine if the current font selected is italic 
    public bool IsFontItalic(); 
 
    // determine if the current font selected is strikeout 
    public bool IsFontStrikeout(); 
 
    // determine if the current font selected is Superscript 
    public bool IsFontSuperscript(); 
 
    // determine if the current font selected is Subscript 
    public bool IsFontSubscript(); 
 
// Find and Replace Operations 
 
    // dialog to allow the user to perform a find and replace 
    public void FindReplacePrompt(); 
 
    // reset the find and replace options to initialize a new search 
    public void FindReplaceReset(); 
 
    // finds the first occurrence of the given text string 
    // uses false for the search options 
    public bool FindFirst(string findText); 
 
    // finds the first occurrence of the given text string 
    public bool FindFirst(string findText, 
bool matchWhole, bool matchCase); 
 
    // finds the next occurrence of a given text string 
    // assumes a previous search was made 
    // uses false for the search options 
    public bool FindNext(string findText); 
 
    // finds the next occurrence of a given text string 
    // assumes a previous search was made 
    public bool FindNext(string findText, 
bool matchWhole, bool matchCase); 
 
    // replace the first occurrence of the given string 
    // uses false for the search options 
    public bool FindReplaceOne(string findText, string replaceText); 
 
    // replace the first occurrence of the given string 
    public bool FindReplaceOne(string findText, string replaceText, 
bool matchWhole, bool matchCase); 
 
    // replaces all the occurrences of the given string 
    // uses false for the search options 
    public int FindReplaceAll(string findText, string replaceText); 
 
    // replaces all the occurrence of the given string 
    public int FindReplaceAll(string findText, string replaceText, 
bool matchWhole, bool matchCase); 
 
    // Table Processing Operations 
 
    // present to the user the table properties dialog 
    // using all the default properties for the table 
    public void TableInsertPrompt(); 
 
    // present to the user the table properties dialog 
    // ensure a table is selected or insertion point is in table 
    public bool TableModifyPrompt(); 
 
    // public function to create a table class 
    // insert method then works on this table 
    public void TableInsert(HtmlTableProperty tableProperties); 
 
    // public function to modify a tables properties 
    // ensure a table is selected or insertion point is in table 
    public bool TableModify(HtmlTableProperty tableProperties); 
 
    // will insert a new row into the table 
    // based on the current user row and insertion after 
    public void TableInsertRow(); 
     
    // will delete the currently selected row 
    // based on the current user row location 
    public void TableDeleteRow(); 
         
    // based on then user selection return a table definition 
    // if table selected (or insertion point in table) return values 
    public void GetTableDefinition(out HtmlTableProperty table, 
out bool tableFound); 
} 
 
 
// enum used to insert a list 
public enum HtmlListType 
{ 
    Ordered, 
    Unordered 
} 
 
// enum used to insert a heading 
public enum HtmlHeadingType 
{ 
    H1 = 1, 
    H2 = 2, 
    H3 = 3, 
    H4 = 4, 
    H5 = 5 
} 
 
// enum used to define the navigate action on a user clicking a href 
public enum NavigateActionOption 
{ 
    Default, 
    NewWindow, 
    SameWindow 
} 
 
// enum used to define the image align property 
public enum ImageAlignOption 
{ 
    AbsBottom, 
    AbsMiddle, 
    Baseline, 
    Bottom, 
    Left, 
    Middle, 
    Right, 
    TextTop, 
    Top 
} 
 
// enum used to define the horizontal alignment property 
public enum HorizontalAlignOption 
{ 
    Default, 
    Left, 
    Center, 
    Right 
} 
 
// enum used to define the vertical alignment property 
public enum VerticalAlignOption 
{ 
    Default, 
    Top, 
    Bottom 
} 
 
// enum used to define the visibility of the scroll bars 
public enum DisplayScrollBarOption 
{ 
    Yes, 
    No, 
    Auto 
} 
 
// enum used to define the unit of measure for a value 
public enum MeasurementOption 
{ 
    Pixel, 
    Percent 
} 
 
 
// enum used to modify the font size 
public enum HtmlFontSize 
{ 
    Default    = 0, 
    xxSmall    = 1,    // 8 points 
    xSmall    = 2,    // 10 points 
    Small        = 3,    // 12 points 
    Medium    = 4,    // 14 points 
    Large        = 5,    // 18 points 
    xLarge    = 6,    // 24 points 
    xxLarge    = 7    // 36 points 
} 
 
 
// struct used for defining FONT attributes (not styles) 
[Serializable] 
[TypeConverter(typeof(HtmlFontPropertyConverter))] 
public struct HtmlFontProperty 
{ 
    // properties defined for the Font 
    public string        Name; 
    public HtmlFontSize    Size; 
    public bool            Bold; 
    public bool            Italic; 
    public bool            Underline; 
    public bool            Strikeout; 
    public bool            Subscript; 
    public bool            Superscript; 
 
    // constrctor for name only 
    public HtmlFontProperty(string name); 
 
    // constrctor for name and size only 
    public HtmlFontProperty(string name, HtmlFontSize size); 
 
    // constrctor for all standard attributes 
    public HtmlFontProperty(string name, HtmlFontSize size, 
bool bold, bool italic, bool underline); 
 
    // constrctor for all attributes 
    public HtmlFontProperty(string name, HtmlFontSize size, 
bool bold, bool italic, bool underline, 
bool strikeout, bool subscript, bool superscript); 
 
    // constructor given a system Font 
    public HtmlFontProperty(System.Drawing.Font font); 
 
 
    // public method to convert the html into a readable format 
    public override string ToString(); 
 
 
    // equals operator for struct comparsion 
    public override bool Equals(object fontObject); 
 
    // operator to compare two font attributes for equality 
    public static bool operator ==(HtmlFontProperty font1, 
HtmlFontProperty font2); 
 
    // operator to compare two font attributes for inequality 
    public static bool operator !=(HtmlFontProperty font1, 
HtmlFontProperty font2); 
 
    // based on a font name being null the font can be assumed Null 
    // default constructor will give a null object 
    public bool IsNull; 
    public bool IsNotNull; 
 
} 
 
 
// Utility Class to perform Font Attribute conversions 
public class HtmlFontConversion 
{ 
 
    // return the correct string name from a HtmlFontSize 
    public static string HtmlFontSizeString(HtmlFontSize fontSize) 
 
    // return the correct bold description for the bold attribute 
    public static string HtmlFontBoldString(bool fontBold); 
 
    // return the correct bold description for the bold attribute 
    public static string HtmlFontItalicString(bool fontItalic); 
 
    // determine the font size given a selected font in points 
    public static HtmlFontSize FontSizeToHtml(float fontSize); 
 
    // determine the font size given the html font size 
    public static float FontSizeFromHtml(HtmlFontSize fontSize); 
 
    // determine the font size given the html int size 
    public static float FontSizeFromHtml(int fontSize); 
 
    // Used to determine the HtmlFontSize from a style attribute 
    public static HtmlFontSize StyleSizeToHtml(string sizeDesc); 
 
    // Used to determine the the style attribute is for Bold 
public static bool IsStyleBold(string style); 
 
    // Used to determine the the style attribute is for Italic 
public static bool IsStyleItalic(string style); 
 
} 
 
// expandable object converter for the HtmlFontProperty 
public class HtmlFontPropertyConverter: ExpandableObjectConverter; 
 
 
// struct used for defining TABLE attributes 
public struct HtmlTableProperty 
{ 
    // properties defined for the table 
    public string            CaptionText; 
    public HorizontalAlignOption    CaptionAlignment; 
    public VerticalAlignOption    CaptionLocation; 
    public byte                BorderSize; 
    public HorizontalAlignOption    TableAlignment; 
    public byte                TableRows; 
    public byte                TableColumns; 
    public ushort            TableWidth; 
    public MeasurementOption    TableWidthMeasurement; 
    public byte                CellPadding; 
    public byte                CellSpacing; 
 
    // constructor defining a base table with default attributes 
    public HtmlTableProperty(bool htmlDefaults); 
 
} 
 
 
// Define delegate for raising an editor exception 
public delegate void HtmlExceptionEventHandler 
(object sender, HtmlExceptionEventArgs e); 
 
 
//Exception class for HtmlEditor 
public class HtmlEditorException : ApplicationException 
{ 
 
    // property for the operation name 
    public string Operation; 
 
    // Default constructor 
    public HtmlEditorException () : base(); 
    
    // Constructor accepting a single string message 
    public HtmlEditorException (string message) 
: base(message); 
    
    // Constructor accepting a string message 
// and an inner exception 
    public HtmlEditorException(string message, Exception inner) 
: base(message, inner); 
 
    // Constructor accepting a single string message 
// and an operation name 
    public HtmlEditorException(string message, string operation) 
: base(message); 
 
    // Constructor accepting a string message 
// an operation and an inner exception 
    public HtmlEditorException(string message, string operation, 
Exception inner) 
: base(message, inner); 
 
} 
 
 
// if capturing an exception internally throw an event 
// with the following EventArgs 
public class HtmlExceptionEventArgs : EventArgs 
{ 
 
    // constructor for event args 
    public HtmlExceptionEventArgs 
(string operation, Exception exception) : base(); 
 
    // define operation name property get 
    public string Operation; 
 
    // define message exception get 
    public Exception ExceptionObject; 
}