More HTML Editor Options

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.

In 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.

Such 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;
                      	mnu.CreatePopupMenu();
                      	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)
                      		return;
                      	}
                      	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:

	ON_COMMAND_RANGE(M_EdCmdsStart, M_EdCmdsStart+IDM_REMOVEFORMAT, OnRangeCmds)
                      //

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.
EditHtml3.zip

References:

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

MSHTML Command Identifiers
http://msdn.microsoft.com/en-us/library/aa741315(VS.85).aspx

CHtmlEditCtrl Class
http://msdn.microsoft.com/en-us/library/h14ht0dh.aspx

CHtmlEditCtrlBase Class
http://msdn.microsoft.com/en-us/library/54542c1c.aspx

MSHTML Editing Overviews and Tutorials
http://msdn.microsoft.com/en-us/library/aa770039(VS.85).aspx
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
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!
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

Comments (0)