More HTML Editor Options

Published on
6,489 Points
Last Modified:
In this version of our HTML Editor, we'll create a floating source view/edit window and we'll implement a system that will give us access to the most commonly desired formatting options; for instance, we'll be able to select fonts and colors, insert images, bullet lists, set text justification, and so forth.
Floating Source text editor windowIn previous articles part 1 and part 2, we've been working with a "minimalist" implementation of an HTML editing control -- we're using a dialog-based application (rather than using the full-blown document/view architecture).  We'll keep with that concept on this article, too.  Rather than implement a toolbar, we'll create a right-click Context Menu that will provide all of the functionality that we want to give to the user.

Floating Source Window
Displaying the source text is cool and great for techy-types, but in a "minimalist" implementation, it shouldn't be intrusive.  So in this version, I placed the source-text editor in its own modeless window.  The code to accomplish this is surprisingly simple with MFC:  Use the Resource Editor to create a dialog with a single control -- the edit box.  In the main program, create that dialog right away, but don't show it until requested.  The "code behind" that synchronizes the source view with the browser view is very similar to what was in the earlier version, but it applies to a text edit box in the floating text-edit window rather than a window in the main dialog.

Context Menu Handling
In this final installment of this series, I wanted to experiment with the many IDM_XXXXX Command Identifiers that are available with the MSHTML support and its editing functionality.  The CHtmlEditCtrl control supports most of these with a thin wrapper that simply calls
    ExecCommand( IDM_XXXX,... );
I decided to create a context menu so that a user could right-click and...
   1) Be reminded of the Ctrl+key accelerators
   2) Have access to some functions that do not have built-in Ctrl-key handlers.
right-click Context MenuSuch a large context menu is a bit ungainly, and yours will likely be smaller when you eliminate items that you don't want to support.  It's table-driven -- I've created a table of commands and menu text that's easy to set up and maintain.  Here's the main sequence:
typedef struct {
	int     nHtmlEdCmdID;
	CString sMenuText;
} EditCmds;

EditCmds m_EdCmds[]= {
    { IDM_BOLD            ,L"Bold\tCtrl+B"           },
    { IDM_ITALIC          ,L"Italic\tCtrl+I"         },
    { IDM_UNDERLINE       ,L"Underline\tCtrl+U"      },
    { IDM_REMOVEFORMAT    ,L"RemoveFormat\tCtrl+spc" },
    {-1                   ,0                         },
    { IDM_FONT            ,L"Font and Color"         },
    { IDM_FORECOLOR       ,L"Foreground color"       },
    { IDM_BACKCOLOR       ,L"Background color"       },
    {-1                   ,0                         },
    { IDM_ORDERLIST       ,L"OrderList"              },
    { IDM_UNORDERLIST     ,L"UnorderList"            },
    {-1                   ,0                         },
    { IDM_INDENT          ,L"Indent"                 },
    { IDM_OUTDENT         ,L"Outdent"                },
    { IDM_JUSTIFYCENTER   ,L"JustifyCenter"          },
    { IDM_JUSTIFYLEFT     ,L"JustifyLeft"            },
    { IDM_JUSTIFYRIGHT    ,L"JustifyRight"           },
    {-1                   ,0                         },
    { IDM_HYPERLINK       ,L"Hyperlink\tCtrl+K"      },
    { IDM_UNLINK          ,L"Unlink"                 },
    { IDM_BOOKMARK        ,L"Bookmark (anchor)"      },
    { IDM_UNBOOKMARK      ,L"UnBookmark"             },
    {-1                   ,0                         },
    { IDM_IMAGE           ,L"Insert Image..."        },
    { IDM_HORIZONTALLINE  ,L"Horizontal Line"        },
    {-1                   ,0                         },
    { IDM_UNDO            ,L"Undo\tCtrl+bksp"        },
    { IDM_CUT             ,L"Cut\tCtrl+X"            },
    { IDM_COPY            ,L"Copy\tCtrl+C"           },
    { IDM_DELETE          ,L"Delete\tDel"            },
    { IDM_PASTE           ,L"Paste\tCtrl+V"          },
    { IDM_SELECTALL       ,L"SelectAll\tCtrl+A"      },
    {-1                   ,0                         },
    { IDM_FIND            ,L"Find...\tCtrl+F"        },
    { IDM_PRINT           ,L"Print...\tCtrl+P"       },
    { IDM_PRINTPREVIEW    ,L"Print Preview"          },
    {0                    ,0                         },  // end of list

void CEditHtmlDlg::OnContextMenu(CWnd* pWnd, CPoint pt )
	CMenu mnu;
	for (int j=0; m_EdCmds[j].nHtmlEdCmdID != 0; j++ ) {
		int nCmdID = m_EdCmds[j].nHtmlEdCmdID;
		if ( nCmdID == -1 ) {
			mnu.AppendMenuW( MF_SEPARATOR, nCmdID, L"" );
		} else {
			mnu.AppendMenuW( MF_STRING, nCmdID+M_CmdsStart, m_EdCmds[j].sMenuText );
			long nStatus= m_ctlEditHtml.QueryStatus( nCmdID );
			if (!(nStatus & OLECMDF_ENABLED)) {
				mnu.EnableMenuItem( nCmdID+M_CmdsStart, MF_DISABLED|MF_GRAYED);
	m_ctlEditHtml.ClientToScreen( &pt );
	mnu.TrackPopupMenu(TPM_LEFTALIGN, pt.x, pt.y, this );

void CEditHtmlDlg::OnRangeCmds(UINT nID)
	int nRealID= nID-M_CmdsStart;
	// Demo:  Some commands need user input 
	if ( nRealID == IDM_BACKCOLOR ) {  
		m_ctlEditHtml.SetBackColor(L"green");  // or numeric: RGB(0,255,0)
	m_ctlEditHtml.ExecCommand( nRealID, 0,0,0 );

Open in new window

Note that I didn't bother using the Resource Editor to create the menu -- I just wrote code to build the context menu on-the-fly.   Note the call to m_ctlEditHtml.QueryStatus() on line 56.  This lets me disable menu commands that do not apply.  For instance, the Paste command is disabled if the clipboard is empty and the Hyperlink command is disabled if no text is currently selected.

An important part of this system is the addition of this line:

Open in new window

in the MESSAGE MAP section near the top of the dialog box code.  I use the existing IDM_XXXX values, but added an offset value (M_EdCmdsStart) to each one to avoid conflict with other command you might be supporting.  Every WM_COMMAND message that is higher than M_EdCmdsStart will be routed to my OnRangeCmds handler (line 66 above).  These mostly pass through directly to the ExecCommand function, but it is also possible to intercept the command and take specific action here.  For instance, setting the background color requires a color value -- either a string such as "Red", or an RGB value such as 0xFF000000.  To demonstrate, I just hard coded "green," but you could toss up a dialog box to obtain the desired color value.

Project Source Code
The full source code for this project is available for download.  It includes a VS2008 project file.


Previous Articles:
   Use CHtmlEditCtrl to Create a Simple HTML Editor
   Add a Source Text Editor to Your HTML Editor

MSHTML Command Identifiers

CHtmlEditCtrl Class

CHtmlEditCtrlBase Class

MSHTML Editing Overviews and Tutorials
If you liked this article and want to see more from this author,  please click the Yes button near the:
      Was this article helpful?
label that is just below and to the right of this text.   Thanks!
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month