Click here to Skip to main content
Click here to Skip to main content

Zeta HTML Edit Control

By , 19 May 2013
 

Introduction

This article presents you a small wrapper class around the Windows Forms 2.0 WebBrowser control.

Features

The wrapper is no rocket science but provides some features I struggled with in the past. We use the control in several of our own (internal and external) applications, e.g. our Test Management tool

Some of the features include:

  • Enable the setting of text even when the control is not yet fully initialized
  • Allow pasting of images from the clipboard
  • Allows for resizing the images within the editor with the mouse 
  • Provide an alternative context menu for applying formatting options
  • Optionally directly edit the underlying HTML source code
  • Translated resources in English and German
  • Interface IExternalInformationProvider for externally persisting and restoring settings
  • Provide standard CSS in the control; usually you do not need to define your own CSS

Using the Code

To include the code in your own project, simply include the "ZetaHtmlEditControl.dll" assembly into your project.

Add the assembly to your Visual Studio .NET 2008 Windows Forms Designer Toolbox if you want to be able to drag the ExtendedWebBrowser control to your forms. Alternatively create and initialize an instance of the ExtendedWebBrowser control by code.

Setting HTML

To put HTML from your code into the control, assign the HTML code to the ExtendedWebBrowser.DocumentText property. You do not have to pass a complete HTML document with HEAD and BODY tags but only the actual content that you would write inside the BODY tag.

Getting the HTML 

To read out the HTML from the control, call the ExtendedWebBrowser.GetDocumentText(string folderPath) method. The method takes one parameter "folderPath" that tells the control where to store newly passed images from the clipboard. 

Summary

This article quickly introduced a wrapper around the Windows Forms 2.0 WebBrowser control that adds some extra functions to make it more usable in a real-world-application. Feel free to copy, modify or extend the control to match your own requirements.

To ask questions, suggest features or provide other comments, please use the comments section at the bottom of this article.

History

  • 2013-05-20 - Images inside the edit control can now be resized proportionally to make them smaller. When persisting the images, they are actually resized on disk, too.
  • 2011-06-02 - Added support for inserting and editing tables. Added new user control that has a toolbar (see screenshot) that you can switch on and off from code.
  • 2011-03-16 - Updated for and tested with the latest Internet Explorer 9 (RTM). If you do experience AccessViolation exceptions when working with this control, please read this MSDN blog posting that suggests to add a custom build step
    "$(DevEnvDir)..\tools\vsvars32.bat"
    editbin.exe /NXCOMPAT:NO "$(TargetPath)"
  • 2011-02-26 - Update to (hopefully) make the control work with Internet Explorer 9 RC work again. See this Stack Overflow posting for details. I've included a mini web server with the control to serve the texts from this server, instead of setting it directly. It should be 100% transparent to the user of the code.
  • 2009-11-18 - First public release to CodeProject.com

License

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

About the Author

Uwe Keim
Chief Technology Officer Zeta Producer Desktop CMS
Germany Germany
Member
Uwe does programming since 1989 with experiences in Assembler, C++, MFC and lots of web- and database stuff and now uses ASP.NET and C# extensively, too. He has also teached programming to students at the local university.
 
In his free time, he does climbing, running and mountain biking. Recently he became a father of a cute boy.
 
Some cool, free software from us:
 
Free Test Management Software - Intuitive, competitive, Test Plans. Download now!  
Homepage erstellen - Intuitive, very easy to use. Download now!  
Send large Files online for free by Email
Some random fun stuff in German

Sign Up to vote   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.
Search this forum  
    Spacing  Noise  Layout  Per page   
QuestionLove it...memberOleg Shilo21 May '13 - 2:43 
Very neat. You got my 5.
 
You can improve your solution by allowing embedding images from the Clipboard without saving them to the file. This way your document will become completely self sufficient. I have tried the approach and it works just fine. The only change I did is the introduction of HtmlEditControl.EmbeddImages property and the alternative image injection routine handlePaste:
 
if (EmbeddImages)
{
    byte[] data = File.ReadAllBytes(file);
    string imageContent = System.Convert.ToBase64String(data, 0, data.Length);
    File.Delete(file);
 
    html = string.Format(@"<img src=""data:image;base64,{0}"" />", imageContent);
}
else
    html = string.Format(@"<img src=""{0}"" id=""Img{1}"" />", file, DateTime.Now.Ticks);

AnswerRe: Love it...sitebuilderUwe Keim21 May '13 - 3:39 
Thanks a lot!
 
Seems to work starting in IE 8 or above [^].
 
Any performance issues on this, in your opinion?
Wollen Sie ganz einfach Ihre eigene Homepage erstellen, ohne HTML-Kenntnisse, einfach, professionell und mit viel Freude? Probieren Sie unser Desktop Content Management System (CMS) Zeta Producer für Windows aus. Komplett mit eigenem Shop, Gästebuch, Weblog, Bildergalerien, Integration von YouTube-Videos. Wir haben eine aktive Anwender-Community, schnellen Support, sympathische Support-Mitarbeiter.

GeneralRe: Love it...memberOleg Shilo21 May '13 - 3:56 
Cannot really tell about the performance.
 
Though even if indeed it affects the performance for me it is still worth to have this option as it is the only way to have fully self sufficient document without resorting to the MHT format.
GeneralRe: Love it...memberOleg Shilo21 May '13 - 21:02 
While playing more with the control I noticed that double-clicking the word does not select it. Is there any magic property I need to set in order to enable the behavior?
 
Thanks
GeneralRe: Love it...sitebuilderUwe Keim21 May '13 - 21:48 
Yeah! That is a really strange thing, that started with IE10 (i assume you are using it, too).
 
I do have applications that host the web browser editor control that do allow double-clicking and some that don't.
 
Until now I found no cause of this. If you have any idea, it would be great Smile | :)
Wollen Sie ganz einfach Ihre eigene Homepage erstellen, ohne HTML-Kenntnisse, einfach, professionell und mit viel Freude? Probieren Sie unser Desktop Content Management System (CMS) Zeta Producer für Windows aus. Komplett mit eigenem Shop, Gästebuch, Weblog, Bildergalerien, Integration von YouTube-Videos. Wir haben eine aktive Anwender-Community, schnellen Support, sympathische Support-Mitarbeiter.

GeneralRe: Love it...memberOleg Shilo21 May '13 - 21:59 
Yes it is IE10. I do not really mind it as it brings Spell Checking though ignoring double-clicking is indeed annoying.
 
I see no reason for this behavior and honestly I would even go with the manual selection of the word on double-click. But the problem is that I cannot intercept the mouse event. Not even with WndProc in the main form.
GeneralMy vote of 5membersha-pro20 May '13 - 19:53 
Thanks heaps very neat Smile | :)
GeneralMy vote of 5memberPolinia20 May '13 - 2:06 
Good....
QuestionMethodAccessException [modified]memberGrizaster14 Feb '13 - 4:10 
Fehler beim Versuch der SecurityTransparent-Methode "ZetaHtmlEditControl.HtmlEditControl.getHtml(System.Windows.Forms.IDataObject)" systemeigenen Code über die Methode "ZetaHtmlEditControl.HtmlEditControl.GlobalLock(System.Runtime.InteropServices.HandleRef)" aufzurufen. Methoden müssen sicherheitskritisch oder sicher sein, um systemeigenen Code aufzurufen.
 
I've tried to Copy a String from one row to another into the same control...
(I added a Binding to DocumentText-Property)
 
Is there any possibility to fix this problem?

modified 14 Feb '13 - 10:47.

AnswerRe: MethodAccessExceptionsitebuilderUwe Keim14 Feb '13 - 5:20 
Seems like some strange security issue.
 
Can you comment on your environment?
Wollen Sie ganz einfach Ihre eigene Homepage erstellen, ohne HTML-Kenntnisse, einfach, professionell und mit viel Freude? Probieren Sie unser Desktop Content Management System (CMS) Zeta Producer für Windows aus. Komplett mit eigenem Shop, Gästebuch, Weblog, Bildergalerien, Integration von YouTube-Videos. Wir haben eine aktive Anwender-Community, schnellen Support, sympathische Support-Mitarbeiter.

GeneralRe: MethodAccessExceptionmemberGrizaster14 Feb '13 - 21:13 
First of all, thank you for your reply!
 
My Environment is a Windows7 Professional x64 machine (2,5Ghz, 8GB RAM) using ActiveDirectory for user management. I use Visual Studio 2010 Professional and SQL Server 2008.
 
And additionally we can't ctrl+x the text out from the control...
GeneralRe: MethodAccessExceptionsitebuilderUwe Keim14 Feb '13 - 23:04 
Running the HTML Editor app as admin or non-admin?
 
If non-admin, does the error disappear if you select "run as administrator"?
Wollen Sie ganz einfach Ihre eigene Homepage erstellen, ohne HTML-Kenntnisse, einfach, professionell und mit viel Freude? Probieren Sie unser Desktop Content Management System (CMS) Zeta Producer für Windows aus. Komplett mit eigenem Shop, Gästebuch, Weblog, Bildergalerien, Integration von YouTube-Videos. Wir haben eine aktive Anwender-Community, schnellen Support, sympathische Support-Mitarbeiter.

GeneralRe: MethodAccessExceptionmemberGrizaster15 Feb '13 - 0:06 
The user that i use is a Domain Admin.
 
I tried it with "Run as Administrator" but the same error occurs.
QuestionException thrown when deleting all text in the source editormemberMember 398234515 Jan '13 - 15:03 
I found that if I delete all of the html source in the source edit window the control throws an exception. I traced the exception to private
 
IHTMLTable2 CurrentSelectionTable
....
IHTMLTxtRange rng = CurrentSelectionText;
element = rng.parentElement(); <-----
 
To get around this I check CurrentSelectionText first.
AnswerRe: Exception thrown when deleting all text in the source editorsitebuilderUwe Keim15 Jan '13 - 18:36 
Yes, better checking rng for non-NULL first.
Wollen Sie ganz einfach Ihre eigene Homepage erstellen, ohne HTML-Kenntnisse, einfach, professionell und mit viel Freude? Probieren Sie unser Desktop Content Management System (CMS) Zeta Producer für Windows aus. Komplett mit eigenem Shop, Gästebuch, Weblog, Bildergalerien, Integration von YouTube-Videos. Wir haben eine aktive Anwender-Community, schnellen Support, sympathische Support-Mitarbeiter.

Questionspecial charactermembersir_Arthur300013 Dec '12 - 6:12 
Hi Uwe Keim, I think you should be very busy at work, but i have some question.
 
1. When i paste a webpage to the control, it show me the page very well but when i retrieve the html code, the form show me characters that not are correct (á,é,í,ó), how can i solve this problem?.
 
2. Can i save the all the content included images, like a richtextbox using its property .rtf. This is because, i want to implement a email program like outlook using sql2010, and i want to save all the content to share with all users.
 
Thanks a lot, greats from Perú. Please i need to solve this problem soon.
QuestionSpecial charactersmembercomtric22 Oct '12 - 2:56 
Hello, very useful control!
 
But I have some problems with special characters. For example the german characters ä, ü, ö, ß.
I set the property
CompleteDocumentText
with a html-code. But if there any special character, the control shows me a
 ? 
instead
 Ö 
 
Know someone how I can solve this problem?
 
Thank You!
AnswerRe: Special charactersmembersir_Arthur300013 Dec '12 - 6:14 
hi, did you solve your problem.. i have the same.
GeneralRe: Special charactersmembercomtric14 Dec '12 - 1:23 
Hi Arthur,
 
Unfortunately not. Now i use a simple text control.
GeneralRe: Special charactersmembergiova28 Mar '13 - 10:47 
i had this problem and found the solution.
you have to use System.Web.HttpUtility.HtmlEncode
 
but before using it, you have to hack some chars such as < or > or ? otherwise HttpUtility will translate them.
 
Sample :
//First i hack some chars to unprintable values, so HttpUtility will not translate them
String text = this.htmlEditUserControl1.HtmlEditControl.DocumentText.Replace('<', (char)1);
            text = text.Replace('>', (char)2);
            text = text.Replace('&', (char)3);
            //I dont know why but Zeta add some \r\n so i remove them.
            text.Replace("\r\n", "");
//Here the trick
            text = System.Web.HttpUtility.HtmlEncode(text);
//Now i hack the chars back
            text = text.Replace((char)1, '<');
            text = text.Replace((char)2, '>');
            text = text.Replace((char)3, '&');
//Here we are text will be fine now.

QuestionHow we can change font?memberkaramih3 Oct '12 - 10:08 
Hi,
Thank you for this editor,
How we can change font?
Rgerds
GeneralMy vote of 5memberEngone14 Dec '11 - 9:40 
Very Helpfull. Thanks for sharing
QuestionFont ChangememberezbUltra3 Nov '11 - 0:30 
Thanks for this control, it's great. How can I change Font type?
QuestionAssembly load issuememberEric Legault13 Oct '11 - 5:51 
I've referenced the ZetaHtmlEditControl in a Visual Studio 2010 VB Class Library project and added the control via the Toolbox to a Windows Form.   However, when I debug my assembly and load the form I get this error:
 
"Could not load file or assembly 'ZetaHtmlEditControl, Version=1.1.03, Culture=neutral, PublicKeyToken=2e2e5ba5da72b6c0' or one of its dependencies. The system cannot find the file specified." However, the ZetaHtmlEditControl.dll (and HttpServer.dll and SgmlReaderDll.dll) are clearly present in the Debug directory.
 
Note that this Class library is actually hosted by a commercial application (Colligo Contributor) that allows extending its UI via its SDK. So I debug by launching their .exe which then detects and loads my registered custom assembly into their AppDomain or whatever. Perhaps this architecture is complicating things.
 
Regardless, any ideas?
AnswerRe: Assembly load issuesitebuilderUwe Keim13 Oct '11 - 6:43 
Most likely there are som CRTs or other "system" DLLs missing.
 
I'll recommend the following:
 
1.) Download and install our tool "Zeta Test" from http://www.zeta-test.com[^]
 
2.) Look in the installation folder "C:\Program Files (x86)\Zeta Test\Applications" (default)
 
3.) Copy all Microsoft DLLs to your solution, namely: msvc*.dll, stdole.dll, microsoft.mshtml.dll, Microsoft*.manifest and maybe others, too.
Wollen Sie ganz einfach Ihre eigene Homepage erstellen, ohne HTML-Kenntnisse, einfach, professionell und mit viel Freude? Probieren Sie unser Desktop Content Management System (CMS) Zeta Producer für Windows aus. Komplett mit eigenem Shop, Gästebuch, Weblog, Bildergalerien, Integration von YouTube-Videos. Wir haben eine aktive Anwender-Community, schnellen Support, sympathische Support-Mitarbeiter.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web03 | 2.6.130523.1 | Last Updated 20 May 2013
Article Copyright 2009 by Uwe Keim
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid