HTML editor for VC++ 6.0

• Download source files - 25.4 Kb
• Download demo project - 6.94 Kb

Introduction

Today, applications often need a rich user interface. One of them is the ability to compose or edit HTML documents in a easy, effective and reliable way. This article and source code attached gives you a nice control to perform this task. And now, the best part: this control works fine with Microsoft VC++ 6.0!

Background

I'm the author of Tray Helper application. For a long time, I wanted to add a feature to send a colorful HTML mail. After some research, I found that Microsoft did a nice thing implementing IHTMLDocument2 interface (and a few others related to it) - but working with raw COM interfaces is not very easy, effective or programmer-friendly. I think someone from Microsoft also realized that, and in MFC 7.0, there is a very nice wrapper for COM: CHtmlEditCtrlBase class. After examining the code of this class, I decided to port it to MFC 4.0 and VC++ 6.0.

Using the code

The CHtmlEditCtrl2 class I want to introduce there is not only ported from CHtmlEditCtrlBase - I did some other improvements and changes to the original code - so it not only compiles under VC++ 6.0 but also has some new features and is even easier to use in existing projects. The main change was that CHtmlEditCtrl2 class derives from CWebBrowser2. It means that if your projects already use a standard web browser control to display HTML documents - adding editing capabilities would be trivial (read below for a full instruction).

Adding HTML editor to your projects:

Step 1: Adding an ordinary web browser control to your project.

If you already use a web browser control in your project - skip this paragraph and start reading from "Step 2".

Let's assume that you want to add a HTML edit control to your dialog based application. First, you need to add a web browser control that will contain your HTML documents.

• In order to do it, go to dialog template editor of Visual Studio and click on "Project / Add to project / Components and controls". From pop-up dialog, select "Registered ActiveX controls", and finally select "Web Browser control" (the name of the control depends on the language of your PC - for example, on my Polish version of Windows, it is "Przegladarka Przeglądarka sieci Web firmy Microsoft"). To be sure that you're selecting the right control, check the description below the file list - it should be "WebBrowser control".
• After selecting a control, a dialog box with CWebBrowser2 class to be created should appear. Click on "OK" without any modifications.
• Note that new position should be added to tool-bar with list of controls available to insert into dialog. So, select it and just add a web browser!
• Finally, use a class wizard (Ctrl+W) to add a member variable of type CWebBrowser2 to just add item.
• Next, you can add a OnInitdialog method to your dialog and request a browser to load a HTML document using Navigate method of CWebBrowser2 class.

Step 2: Adding edit capabilities to web browser.

It's very easy. Just follow these few steps:

• Copy HtmlEditCtrl2.H and HtmlEditCtrl2.cpp directory with your source files and add them to your project.
• Modify header file where you have a member variable of CWebBrowser2 declared and change it to CHtmlEditCtrl2.
• Change #include "WebBrowser2.H" to #include "HtmlEditCtrl2.H".
• After loading a HTML document (using, for example, Navigate method), call SetDesignMode(TRUE) method to enable edit mode.
• If after edit is complete, you want to get a source of HTML document, call GetDocumentHTML function.

Highlight of the most important methods of the control (most likely you will need to use them):

• void Navigate(LPCTSTR URL, VARIANT* Flags, VARIANT* TargetFrameName, VARIANT* PostData, VARIANT* Headers)

  Use this function to load a HTML document. Pass as URL, a string with a path to the file to open. It could be a remote site or a local file. Rest of the parameters could be null.

  Examples:

  Navigate("http://www.codeproject.com/">http://www.codeproject.com/", NULL, NULL, NULL, NULL);
  
  Navigate("C:\\my_file.html", NULL, NULL, NULL, NULL);

• BOOL SetDesignMode(BOOL bMode);

  Enables or disables edit mode. In versions of Internet Explorer prior to 6.0, document must be loaded in the first place to enter a design mode.

• HRESULT GetDocumentHTML(CString& szHTML, BOOL a_bClearDirtyFlag = FALSE);

  Gets the content of HTML document.

• HRESULT SetDocumentHTML(LPCTSTR szHTML);

  Sets new content for HTML document. Please note that you can't call this function on an empty control. You need to load a document first (for example, by calling the Navigate method).

Complete list of public member functions of CHtmlEditCtrl2 class:

These member functions are taken directly from CHtmlEditCtrlBase class. Full description at MSDN pages (click here):

BOOL SetDesignMode(BOOL bMode);
HRESULT ExecCommand(const GUID *pGuid, long cmdID, 
  long cmdExecOpt, VARIANT* pInVar=NULL, VARIANT* pOutVar=NULL);
HRESULT ExecCommand(long cmdID, long cmdExecOpt, 
  VARIANT* pInVar=NULL, VARIANT* pOutVar=NULL);
long QueryStatus(long cmdID);
HRESULT GetEvent(IHTMLEventObj **ppEventObj);
HRESULT GetEventSrcElement(IHTMLElement **ppSrcElement);
HRESULT GetDocument(IHTMLDocument2** ppDoc);
HRESULT NewDocument();
HRESULT GetDocumentHTML(CString& szHTML, 
  BOOL a_bClearDirtyFlag = FALSE);
HRESULT SetDocumentHTML(LPCTSTR szHTML);
HRESULT GetIsDirty();
HRESULT GetDocumentTitle(CString& szTitle);
HRESULT GetBlockFormatNames(CStringArray &sa);
HRESULT SetForeColor(LPCTSTR szColor);
HRESULT SetForeColor(int nColor);
HRESULT GetForeColor(int &nColor);
HRESULT GetBackColor(int& nColor);
HRESULT SetBackColor(LPCTSTR szColor);
HRESULT SetBackColor(int nColor);

HRESULT SetDefaultComposeSettings(LPCSTR szFontName=NULL,
                  unsigned short nFontSize=3,
                  COLORREF crFontColor=0xFF000000,
                  COLORREF crFontBgColor=0xFF000000,
                  bool bBold = false,
                  bool bItalic = false,
                  bool bUnderline = false);

HRESULT GetBlockFormat(CString& strFormat);
HRESULT SetBlockFormat(LPCTSTR szFormat);
HRESULT GetFontFace(CString& strFace);
HRESULT SetFontFace(LPCTSTR szFace);
HRESULT IE50Paste(LPCTSTR szData);
HRESULT GetBookMark(CString& strAnchor);
HRESULT SetBookMark(LPCTSTR szAnchorName);
HRESULT SetOverwriteMode(bool bMode);
HRESULT Is1DElement(bool& bValue);
HRESULT Is2DElement(bool& bValue);
HRESULT GetFontSize(short& nSize);
HRESULT SetFontSize(unsigned short size);
HRESULT GetFrameZone(short& nZone);
HRESULT SetCSSEditingLevel(short nLevel);
HRESULT HyperLink(LPCTSTR szUrl = NULL);
HRESULT Image(LPCTSTR szUrl = NULL);
HRESULT OrderList(LPCTSTR szId = NULL);
HRESULT UnorderList(LPCTSTR szId = NULL);

HRESULT AddToGlyphTable(LPCTSTR szTag,
            LPCTSTR szImgUrl,
            unsigned short nTagType,
            unsigned short nAlignment,
            unsigned short nPosInfo,
            unsigned short nDirection,
            unsigned int nImgWidth,
            unsigned int nImgHeight);

HRESULT EmptyGlyphTable();
HRESULT Button(LPCTSTR szId = NULL);
HRESULT CheckBox(LPCTSTR szId = NULL);
HRESULT DropDownBox(LPCTSTR szId = NULL);
HRESULT HorizontalLine(LPCTSTR szId = NULL);
HRESULT Iframe(LPCTSTR szId = NULL);
HRESULT InsFieldSet(LPCTSTR szId = NULL);
HRESULT InsInputButton(LPCTSTR szId = NULL);
HRESULT InsInputHidden(LPCTSTR szId = NULL);
HRESULT InsInputImage(LPCTSTR szId = NULL);
HRESULT InsInputPassword(LPCTSTR szId = NULL);
HRESULT InsInputReset(LPCTSTR szId = NULL);
HRESULT InsInputSubmit(LPCTSTR szId = NULL);
HRESULT InsInputUpload(LPCTSTR szId = NULL);
HRESULT ListBox(LPCTSTR szId = NULL);
HRESULT Marquee(LPCTSTR szId = NULL);
HRESULT Paragraph(LPCTSTR szId = NULL);
HRESULT RadioButton(LPCTSTR szId = NULL);
HRESULT SaveAs(LPCTSTR szPath = NULL);
HRESULT TextArea(LPCTSTR szId = NULL);
HRESULT TextBox(LPCTSTR szId = NULL);
HRESULT GetAbsolutePosition(bool &bCurValue);
HRESULT SetAbsolutePosition(bool bNewValue);
HRESULT Set2DPosition(bool bNewValue);
HRESULT SetAtomicSelection(bool bNewValue);
HRESULT SetAutoURLDetectMode(bool bNewValue);
HRESULT SetDisableEditFocusUI(bool bNewValue);
HRESULT SetIE5PasteMode(bool bNewValue);
HRESULT SetLiveResize(bool bNewValue);
HRESULT SetMultiSelect(bool bNewValue);
HRESULT SetOverrideCursor(bool bNewValue);
HRESULT SetRespectVisInDesign(bool bNewValue);
HRESULT GetShowAlignedSiteTags(bool &bCurValue);
HRESULT SetShowAlignedSiteTags(bool bNewValue);
HRESULT GetShowAllTags(bool &bCurValue);
HRESULT SetShowAllTags(bool bNewValue);
HRESULT GetShowAreaTags(bool &bCurValue);
HRESULT SetShowAreaTags(bool bNewValue);
HRESULT GetShowCommentTags(bool &bCurValue);
HRESULT SetShowCommentTags(bool bNewValue);
HRESULT GetShowMiscTags(bool &bCurValue);
HRESULT SetShowMiscTags(bool bNewValue);
HRESULT GetShowScriptTags(bool &bCurValue);
HRESULT SetShowScriptTags(bool bNewValue);
HRESULT GetShowStyleTags(bool &bCurValue);
HRESULT SetShowStyleTags(bool bNewValue);
HRESULT GetShowUnknownTags(bool &bCurValue);
HRESULT SetShowUnknownTags(bool bNewValue);
HRESULT GetShowBRTags(bool &bCurValue);
HRESULT SetShowBRTags(bool bNewValue);
HRESULT PrintDocument();
HRESULT PrintDocument(LPCTSTR szPrintTemplate);
HRESULT PrintDocument(bool bShowPrintDialog);
HRESULT PrintPreview();
HRESULT PrintPreview(LPCTSTR szPrintTemplate);
HRESULT Bold();
HRESULT Copy();
HRESULT Cut();
HRESULT Delete();
HRESULT Indent();
HRESULT Italic();
HRESULT JustifyCenter();
HRESULT JustifyLeft();
HRESULT JustifyRight();
HRESULT Outdent();
HRESULT Paste();
HRESULT RemoveFormat();
HRESULT SelectAll();
HRESULT Underline();
HRESULT Unlink();
HRESULT ClearSelection();
HRESULT Font();
HRESULT RefreshDocument();
HRESULT UnBookmark();

These member functions were added by the author of this article (Ireneusz Zieliński) just to make the usage of this class easier, and are not a part of the original ChtmlEditCtrlBase class:

• BOOL IsBold();

  Checks if currently selected text has �bold� attribute.

• BOOL IsUnderline();

  Checks if currently selected text has �underline� attribute.

• BOOL IsStrikeOut();

  Checks if currently selected text has �strike-out� attribute.

• BOOL IsItalic();

  Checks if currently selected text has �italic� attribute.

• BOOL CanPaste();

  Checks if paste operation is available on HTML editor right now.

• HRESULT LineBreakNormal();

  Inserts a single line break (HTML <BR> tag) at current editing position.

• BOOL IsDesignMode();

  Checks if editor is in �designer� mode (in other words, TRUE means that you can edit content).

• HRESULT GetURLsOfAllImages(CStringArray& a_arrImages);

  Returns a collection of all images present in currently loaded HTML document.

• HRESULT ReplaceImageURL(const CString& a_sUrlToReplace, const CString& a_sUrlToReplaceWith);

  Replaces an image with a different one.

• HRESULT GetDocumentBody(CString& a_sBody, BOOL a_bTextInsteadHTML);

  Gets the body of the message. Body is a part of HTML document that is limited by <BODY> and </BODY> HTML tags. You can pass TRUE as a second parameter to get a plain text representation of the content of the document.

• HRESULT Undo();

  Performs an undo operation on editor.

• HRESULT Redo();

  Performs a redo operation on editor.

• HRESULT Find();

  Displays a Find Text dialog.

• HRESULT StrikeOut();

  Sets a �strike-out� attribute on currently selected text.

• HRESULT SubScriptSelectedText();

  Sets a �sub-script� attribute on currently selected text.

• HRESULT SuperScriptSelectedText();

  Sets a �super-script� attribute on currently selected text.

• HRESULT SetDocumentCharset(const CString& a_sCharsetEncoding);

  Sets a new charset encoding for currently loaded HTML document.

• HRESULT GetDocumentCharset(CString& a_sCharsetEncoding);

  Returns a string representing the current character encoding of the document.

• HRESULT ShowSource();

  Opens Notepad with the HTML source of the document.

• HRESULT ShowIEOptionsDialog();

  Displays a dialog with Internet Explorer options.

• HRESULT GetBodyBackgroundImage(CString& a_sImage);

  Gets a URL to the background image of the document.

• HRESULT SetBodyBackgroundImage(const CString& a_sImage);

  Sets a new background image for the document.

• HRESULT GetBodyProperties(CString& a_sTag);

  Gets proprieties of <BODY> tag.

• HRESULT GetBodyBackgroundColor(CString& a_sColor);

  Gets background color of document�s body.

• HRESULT GetBodyTextColor(CString& a_sColor);

  Gets text color of document�s body.

• HRESULT PasteHTMLAtCurrentSelection(const CString& a_sHTMLText, BOOL a_bSetCursorAtBeginingOfInsertedText);

  Pastes HTML code at the current cursor location. Moves back cursor after inserting, if required.

The meaning and usage of all of these functions are very easy to guess / understand. Most of these functions are simple wrappers over COM calls - so, in case of any problems - check what COM function is being called and read about it in MSDN. The ultimate MSDN resource is a description of CHtmlEditCtrlBase class. Since my class is only an 80% port of CHtmlEditCtrlBase, I recommend to read this page first (in case of any questions).

Here are some tips that could save you some time:

1. Call SetDesignerMode(TRUE) function when document is loaded into control. Doing it just after calling Navigate(url...) could be too early (function will fail if Internet Explorer prior to version 6.0 is installed on the machine).
2. If you create an empty HTML document and start editing it - you quickly realize that pressing an Enter key inserts a paragraph, not a line break. This default behavior is pretty irritating and could be solved in two ways: first, you could press SHIFT + ENTER instead, or load into HTML control such an HTML document:

   <HTML>
   <BODY>
   <DIV> </DIV>
   </BODY>
   </HTML>

3. In case of compilation errors, make sure that you have on your machine the latest Platform SDK installed (the most important are Core and Internet Development SDKs).

At this point of the article, I would like to wish you good luck creating killer applications ;-D. Sorry for my English - it's not my native language.

Points of Interest

• MSDN pages about CHtmlEditCtrlBase class.
• MSDN pages about IHTMLDocument2 interface.
• MSDN - Programming and Reusing the Browser - Overviews and Tutorials.
• Microsoft Platform SDK update site.

History of changes

• 27^th of December 2004: Now, control should work perfect with UNICODE defined. Added fail-safe CopyEx method (full description in code (CPP file)).
• 8^th of June 2004: Updated demo application.