Using the new HTML Editing classes in MFC7

Download source files (beta 2) - 257 Kb

Sample Image - MFCHTMLEdit.gif

Introduction

This article provides a bare-bones samples that demonstrates the use of the new HTML editing and browsing classes in MFC.

MFC7 includes several new classes that encapsulate the Internet Explorer MSHTML editing control. This control is an ActiveX control that provides WYSIWYG editing and browsing, and the MFC and ATL wrappers for this class make it's use very straight forward.

The sample application is a simple AppWizard generated application with the view class derived from CHtmlEditView (the last step in the MFC application wizard). In specifying CHtmlEditView as your edit class' base class, you automatically take on CHtmlEditDoc as your Document's base class as well.

These two classes work together to provide HTML file loading, saving, editing, browsing and printing. Context menus are provided and it is very simple to hook your toolbar button or menu items to the various wrapper methods in the MFC HTML editing classes.

The sample contains a rebar with two toolbars - one containing the standard load, save and cut/copy/paste buttons, and one containing formatting options such as bold, italic, indenting, hyperlink and editing mode.

In the CHtmlEditView derived class is a set of macro calls similar to the standard BEGIN_MESSAGE_MAP macros familiar to MFC programmers. In this case, though, the macros are of the form

BEGIN_DHTMLEDITING_CMDMAP(CHTMLEditView)
DHTMLEDITING_CMD_ENTRY(ID_EDIT_COPY, IDM_COPY)
DHTMLEDITING_CMD_ENTRY(ID_EDIT_CUT, IDM_CUT)
DHTMLEDITING_CMD_ENTRY(ID_EDIT_PASTE,IDM_PASTE)
DHTMLEDITING_CMD_ENTRY(ID_EDIT_UNDO, IDM_UNDO)
...
END_DHTMLEDITING_CMDMAP()

What these macros do is allow you to associate an MSHTML Command Identifier with a command ID. When the view receives the given command ID (say, ID_EDIT_COPY) it will execute the associated MSHTML command (IDM_COPY). This will in turn execute the
appropriate method of the MSHTML ActiveX control.

To associate a toolbar button with ID value ID_UNDERLINE with the MSHTML command for underlining the current selection, simply add the line

DHTMLEDITING_CMD_ENTRY(ID_UNDERLINE, IDM_UNDERLINE)

Some of the MSHTML identifiers are shown below. For a full list, consult the topic 'MSHTML Command Identifiers' in the online documentation.

`IDM_BACKCOLOR`	Sets or retrieves the background color of the current selection.
`IDM_BOLD`	Toggles the current selection between bold and nonbold.
`IDM_BOOKMARK`	Creates a bookmark anchor or retrieves the name of a bookmark anchor for the current
`IDM_COPY`	Copies the current selection to the clipboard.
`IDM_CUT`	Copies the current selection to the clipboard and then deletes it.
`IDM_DELETE`	Deletes the current selection.
`IDM_FONT`	Opens a font dialog box to enable the user to change the text color, font, and font size of the current selection.
`IDM_FONTNAME`	Sets or retrieves the font for the current selection.
`IDM_FONTSIZE`	Sets or retrieves the font size for the current selection.
`IDM_FORECOLOR`	Sets or retrieves the foreground (text) color of the current selection.
`IDM_HYPERLINK`	Inserts a hyperlink on the current selection, or displays a dialog box enabling the user to specify a URL to insert as a hyperlink on the current selection.
`IDM_INDENT`	Increases the indent of the selected text by one indentation increment.
`IDM_ITALIC`	Toggles the current selection between italic and nonitalic.
`IDM_JUSTIFYCENTER`	Centers the format block in which the current selection is located.
`IDM_JUSTIFYLEFT`	Left-justifies the format block in which the current selection is located.
`IDM_JUSTIFYRIGHT`	Right-justifies the format block in which the current selection is located.
`IDM_ORDERLIST`	Toggles the current selection between an ordered list and a normal format block.
`IDM_OUTDENT`	Decreases by one increment the indentation of the format block in which the current selection is located.
`IDM_OVERWRITE`	Toggles the text-entry mode between insert and overwrite.
`IDM_PASTE`	Overwrites the contents of the clipboard on the current selection.
`IDM_PRINT`	Prints the current document using either the default print template or a custom print template.
`IDM_PRINTPREVIEW`	Opens the Print Preview window for the current document using either the default print preview template or a custom template.
`IDM_UNDERLINE`	Toggles the current selection between underlined and not underlined.
`IDM_UNORDERLIST`	Toggles the current selection between an ordered list and a normal format block.

If you wish to call any one of the MSHTML commands directly, then the MFC wrapper classes provide you with a number of helper functions

HRESULT ExecHelperNN(UINT nCmdID);
HRESULT ExecHelperSetVal(UINT nCmdID, LPCTSTR szID=NULL) const
HRESULT ExecHelperSetVal(UINT nCmdID, bool bValue) const
HRESULT ExecHelperSetVal(UINT nCmdID, short nNewVal) const
HRESULT ExecHelperGetVal(UINT nCmdID, bool &bValue) const
HRESULT ExecHelperGetVal(UINT nCmdID, short &nValue) const

These functions take a MSHTML Command identifier, plus an optional value (or reference for a return value) and execute the associated command.

An example is in changing the editing more to Browse:

ExecHelperNN(IDM_BROWSEMODE);

More specific wrappers are provided, such as functions to set the font face (SetFontFace(LPCTSTR szFace)) or functions to set and get the HTML (GetDocumentHTML/SetDocumentHTML).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Chris Maunder

Founder
The Code Project

Canada

Member

Follow on Twitter

Chris is the Co-founder, Administrator, Architect, Chief Editor and Shameless Hack who wrote and runs The Code Project. He's been programming since 1988 while pretending to be, in various guises, an astrophysicist, mathematician, physicist, hydrologist, geomorphologist, defence intelligence researcher and then, when all that got a bit rough on the nerves, a web developer. He is a Microsoft Visual C++ MVP both globally and for Canada locally.

His programming experience includes C/C++, C#, SQL, MFC, ASP, ASP.NET, and far, far too much FORTRAN. He has worked on PocketPCs, AIX mainframes, Sun workstations, and a CRAY YMP C90 behemoth but finds notebooks take up less desk space.

He dodges, he weaves, and he never gets enough sleep. He is kind to small animals.

Chris was born and bred in Australia but splits his time between Toronto and Melbourne, depending on the weather. For relaxation he is into road cycling, snowboarding, rock climbing, and storm chasing.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Overriding the default Enter key behavior in CHtmlEditView

Member 2884008

10:01 26 Aug '09

Is there any way to override the default behavior of the CHtmlEditView when the Enter key is pressed?

The default behavior is to insert paragraph tags: .... This results in double-spaced line breaks. To enter single-spaced breaks the user must type Shift+Enter. Is there any way to reverse this?

I tried handling the WM_KEYDOWN message in PreTranslateMessage and inserting using pasteHTML(), but for some reason this inserts without the forward slash.

Douglas Sherlock
Vancouver, BC
Canada

Re: Overriding the default Enter key behavior in CHtmlEditView [modified]

Ekedorff

8:14 5 Oct '11

After MANY hours trying to figure this out, I finally found out how extremely easy it was thanks to this article: HTML editor for VC++ 6.0[^]

Just override PreTranslateMessage in your derived CHtmlEditCtrl and paste:

BOOL CMyHtmlEditCtrl::PreTranslateMessage(MSG* pMsg)
{
    // TODO: Add your specialized code here and/or call the base class
    if(pMsg->message==WM_KEYDOWN)
    {
 
        if( pMsg->wParam==VK_RETURN)
        {
            HRESULT hr = ExecHelperNN(IDM_LINEBREAKNORMAL);
	       if (SUCCEEDED(hr))
		{
		  return TRUE;
		}
        }
 
    }
 
    return CHtmlEditCtrl::PreTranslateMessage(pMsg);
}

I hope this saves some time for you... Smile | :)

Joakim

modified 5 Oct '11.

display a animated gif in the view area [modified]

pk2007

1:43 24 Apr '07

I am trying to put the the extra code along withthe functionality provided by Chris . I want to put a button on the toolbar and when user click on the button a certain gif should display in the view area without prompting the user for the location of gif file. I want to pass the location internally. any help? -- modified at 8:34 Tuesday 24th April, 2007
Sign In·View Thread·Permalink

How to lock blocks? [modified]

richard sancenot

23:42 20 Nov '06

This class is just great, however i would like to lock some blocks (like SPAN) in order to prevent the user from modifying some html areas Frown | :(

I know it is possible to implement a method like "PreHandleEvent" that MSHTML com object calls before any edition, but i'm not sure it's the right solution Confused | :confused:

.

Thanks in advance

-- modified at 5:49 Tuesday 21st November, 2006
OK i found myself, check out this link... (function put_contentEditable)
http://msdn.microsoft.com/workshop/browser/editing/activateeditor.asp[^]

Tout programme dont la fiabilité dépend de l'homme n'est pas fiable

Using this example for converting MFc to HTML.

moshiko_abc

0:10 21 Jun '05

Hi,

I have an MFC6 project that I wish to view as HTML pages.

I don't have too much experience these technologies - so I didn't completely understand whether this article gives me a hint of how I can to do the conversion.

Does anybody knows if what I should do is move from MFC6 to MFC7 and then use this article or that there is other way.

Thanks,

Moshe.

\\\|///
\\ ~ ~ //
( @ @ )
/------------------------oOOo-(_)-oOOo---------------------------\
| Moshe Ben Yishay. | |
| Senior Engineer. | Phone: +972-4-8506506 |
| Qualcomm Israel Ltd. | Direct: +972-4-8506640 |
| Omega Center. | Fax: +972-4-8506508 |
| Matam Postal Agency. | Mobile: +972-54-3039818 |
| Haifa 31905 Israel. | Email: mosheb@qualcomm.com |
\---------------------------------Oooo.--------------------------/
.oooO ( )
( ) ) /
\ ( (_/
\_)

after the file has been changed

Tcpip2005

21:39 16 Apr '05

if the file has been changed, when I close it , a message box would be showed. how can I show my message box instead that one???? Thank you very much!
Sign In·View Thread·Permalink

spell checker

cowboymoore

9:40 5 Aug '04

Has anyone hooked up a spell checker to the CHTMLEditView? Thanks, Sean
Sign In·View Thread·Permalink	3.50/5 (2 votes)

Can't show source

Alick Xiong

5:16 29 Jun '04

1>I added the code below into your project but can't work
void CHTMLEditView::OnShowSource()
{
// TODO: Add your command handler code here
CString str;
GetDocumentHTML(str);
AfxMessageBox(str);
}
2>Only this can work correctly

DHTMLEDITING_CMD_ENTRY(ID_MY_VIEW_SOURCE, IDM_VIEWSOURCE)

I want to act as the way as the first. When I do this,Output said that "CStreamOnCString" in afxhtml.h undeclared. I used your VC6 version.
Can you tell me why? How to fit this.

Thank you very much!

Re: Can't show source

Alick Xiong

5:56 1 Jul '04

I have fixed it. it works correctly now. sorry to disturb you. Alick
Sign In·View Thread·Permalink

MSHTML Custom Print

senthil_kumar_project

5:05 17 Jun '04

I am using Mshtml i need how to develop custom print and how to set the number of pages in programmatically. please give the solution senmah
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Problem on handling mht files

Alick Xiong

7:18 15 Jun '04

I tried your vc6 version program. It's great. But it can only save html files correctly. If I save my changes to a mht file,when I reload the mht that has been changed,It shows the source code not the real page. I haven't find out the problem. Can you fix this? Thank you. ALick
Sign In·View Thread·Permalink	2.00/5 (1 vote)

CHtmlEditCtrl instead of view

cowboymoore

18:21 4 Jun '04

Does anyone have any sample of using the ctrl instead of a view? How do you get the mapping macros to work? Sean
Sign In·View Thread·Permalink

Re: CHtmlEditCtrl instead of view

frixx

5:32 15 Jun '04

I also need an example of CHTMLEditCtrl. thx
Sign In·View Thread·Permalink

Re: CHtmlEditCtrl instead of view

Anonymous

5:21 11 Sep '04

yeah, me 2
Sign In·View Thread·Permalink

Re: CHtmlEditCtrl instead of view

M Tarik

12:26 20 Feb '05

me 4 .....I mean me too.
Sign In·View Thread·Permalink

Re: CHtmlEditCtrl instead of view

testasss

4:23 31 Mar '06

- Add a Class that inherit from CHtmlEditCtrl. Example CMyHtmlEditCtrl
- Make the creator and destructor functions of CMyHtmlEditCtrl Publics (I dont know why 2005 add this methods as Protected).
- add a memeber variable to your Dialog Class. lets say:
CMyHtmlEditCtrl m_Edit;
- In the Dialog designer add a picture control. Place it where you want the CHtmlEditCtrl will be (Give it an id, lets say: IDC_STATIC).
- Add the following code to your Dialog class .CPP and .h
MyDialog.h

afx_msg BOOL OnInitDialog();

MyDialog.CPP

BOOL CMyDialog::OnInitDialog()

{

	CRect rect;

	GetDlgItem(IDC_STATIC)->GetWindowRect(rect);

	ScreenToClient(rect);

	

	CDialog::OnInitDialog();

	m_Edit.Create("sq",WS_CHILD|WS_VISIBLE,rect,this,126);

	return TRUE;  // return TRUE  unless you set the focus to a control

}

126 : is the ID assigned to the control in this case, you must change for a unique one in your project.

FM Stereo

Re: CHtmlEditCtrl instead of view

ibraheempindi

2:50 12 Nov '08

i have a problem with that, it works most of the time but some time it creates outside the parent, i.e. parent is not set to the dialog, and if i get parent of browser object it return NULL, and if i try to set parent again , it also doesn't help much with, while error code also remains 0. How could i make it a child of parent dialog...i realy didnt understand why it fails some times. I'm calling create of browser in on onInitDialog of parent dialog, but i tried it to move to onShow as well and with the timer as well...but same results Frown | :(

...any help ???

For those who are trying to do so...

richard sancenot

6:11 25 Jan '07

I did it myself, it's not difficult.
Just make a class that derives from CHtmlEditCtrl and call create() like that :



#include "afxhtml.h"//Don't forget that

class CDHtmlEditor : public CHtmlEditCtrl

{

public:

	DECLARE_MESSAGE_MAP()

...

}

 

CDHtmlEditor m_CtrlHtmlEditor

m_CtrlHtmlEditor.Create(sz,WS_CHILD|WS_VISIBLE,CRect(0,0,200,200),this,WM_MYWINDOW);

That's all Big Grin | :-D

Tout programme dont la fiabilité dépend de l'homme n'est pas fiable

your code is a copy of MSDN samples

haoshenghan

2:20 23 Apr '04


Sign In·View Thread·Permalink	1.00/5 (1 vote)

Re: your code is a copy of MSDN samples

Chris Maunder

11:03 23 Apr '04

What dates were each published? cheers, Chris Maunder
Sign In·View Thread·Permalink

How to make MSDN htmlEdit Sample available in VC6

okboy

19:26 25 Dec '03

How to make MSDN htmledit sample webavailable in VC6? Thanks. I believe I can fly.
Sign In·View Thread·Permalink

Re: How to make MSDN htmlEdit Sample available in VC6

Irek Zielinski

11:17 5 Jun '04

Chekc out: http://www.codeproject.com/useritems/HtmlEdit.asp[^] Check out my software at: http://www.ireksoftware.com
Sign In·View Thread·Permalink

How to Modify Right Button Menu?

FERREO-ROCHE

22:58 13 Aug '03

I search the whole codes,but i can't find any useful codes for right button menu,please help me.
Sign In·View Thread·Permalink	3.33/5 (3 votes)

How to use CHtmlEditCtrl in a Dialog Box

raulCM

7:13 4 Aug '03

I'm not used to using the document/view architecture. How could i insert a CHtmlEditCtrl in Visual Studio .NET in a Dialog App. Do I have to insert an ActiveX or something like that ? Thanks in advance.
Sign In·View Thread·Permalink	2.25/5 (4 votes)