This tutorial will demonstrate how to create a wysiwyg (visual) HTML editor using IHTMLdocument2 class in mshtml.
The first thing we need to do is create a windows forms application in C#, using an IDE such as Visual Studio or SharpDevelop.
On the form, place a toolbar and a webbrowser control, such as shown below
Next, we need to set the properties of the webbrowser to make it work correctly in edit mode:
webbrowser properties:
AllowNavigation = false
Allowwebbrowserdrop = false
IsWebBrowserContextMenu = false
ScriptErrorsSuppressed = true
(Name) = HTMLEditor
All other settings can remain their default value
Now we need to add a reference to mshtml, do this by clicking the 'Project' menu bar item, and, from the drop down menu, click 'Add Reference'.
When the dialog appears, click the COM tab. Under that tab, scroll down untill you see 'Microsoft HTML Object Library', double click the object to add it.
Now that we have the reference to the HTML object library, which resolves to 'mshtml', just add a using mshtml; to our Form1.cs file.
Also, under public partial class Form1 : Form, add this global variable:
csharp
private IHTMLDocument2 doc;
Once this is done, go back to design mode, double click the top part of the form to create a Form1_Load()( event. In Form1_Load(), add the following code:
csharp
HTMLEditor.DocumentText = "<html><body></body></html>"; //This will get our HTML editor ready, inserting common HTML blocks into the document
//Make the web 'browser' an editable HTML field
doc =
HTMLEditor.Document.DomDocument as IHTMLDocument2;
doc.designMode = "On";
//What we just did was make our web browser editable!
We now have a fully enabled wysiwyg HTML editor!
Controlling the HTML Editor
Now that we have our editor set up, we need a way to edit the contents to the user's commands, add something to the toolbar we inserted a while ago, such as a bold button, font size selector, etc. For this tutorial, I am going to use a bold button and a font size selector.
Double-Click the Bold button, creating an onclick() event. You should be automatically switched to code view. In the event that was just created (eg. private void toolStripButton1_Click() ), add this to make the selected font bold:
csharp
HTMLEditor.Document.ExecCommand("Bold", false, null);
...and that's it, this will now make the selected text bold!
The first argument ("Bold") is, obviously, the command. The Second argument (false in this case) determines whether or not the pre-made dialog, that comes with mshtml, is shown. The third argument (null in this case) is the Object Value.
Do the same thing for the rest of the controls you have added to your toolbar, create your own WYSIWYG HTML editor!
Here is a list of some of the most common commands:
csharp
HTMLEditor.Document.ExecCommand("Bold", false, null);
HTMLEditor.Document.ExecCommand("Underline", false, null);
HTMLEditor.Document.ExecCommand("Italics", false, null);
HTMLEditor.Document.ExecCommand("StrikeThrough", false, null);
HTMLEditor.Document.ExecCommand("FontName", false, "Times New Roman");
HTMLEditor.Document.ExecCommand("FontName", false, "Arial");
HTMLEditor.Document.ExecCommand("FontName", false, "etc.");
HTMLEditor.Document.ExecCommand("FontSize", false, "1");
HTMLEditor.Document.ExecCommand("FontSize", false, "2");
HTMLEditor.Document.ExecCommand("FontSize", false, "3");
HTMLEditor.Document.ExecCommand("InsertUnorderedList", false, null);
HTMLEditor.Document.ExecCommand("InsertOrderedList", false, null);
HTMLEditor.Document.ExecCommand("Cut", false, null);
HTMLEditor.Document.ExecCommand("Copy", false, null);
HTMLEditor.Document.ExecCommand("Paste", false, null);
HTMLEditor.Document.ExecCommand("CreateLink", true, null);
//HERE IS THE WAY TO INSERT YOUR OWN TEXT INTO THE HTML EDITOR:
String TEXT = "YOUR TEXT GOES HERE!";
IHTMLTxtRange range =
doc.selection.createRange() as IHTMLTxtRange;
range.pasteHTML(TEXT);
range.collapse(false);
range.select();
There are a few more, but those are the most common ones!
Getting the HTML from the control
If you want your HTML editor to save the html to a .html file, just call the DocumentText from the webbrowser, like this:
csharp
String SAVECONTENTS = HTMLEditor.DocumentText;
//Continue, to save the contents to a file
This is the end of this tutorial! I hope this tutorial has been useful to you, and thanks for reading!
If you have any questions on this topic, feel free to ask!
-AJ32
)
