• (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »

Creating a wysiwyg HTML editor in C# Using the MS HTML Object Library

#1 aj32  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 30
  • View blog
  • Posts: 577
  • Joined: 30-August 07

Post icon  Posted 07 April 2008 - 07:22 AM

Creating a wysiwyg HTML editor in C#

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

Posted Image

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:
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:

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.

Posted Image

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:

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:
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:

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 :)

Is This A Good Question/Topic? 4
  • +

Replies To: Creating a wysiwyg HTML editor in C#

#2 aj32  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 30
  • View blog
  • Posts: 577
  • Joined: 30-August 07

Posted 23 May 2008 - 10:22 AM

I can't edit the tutorial, but I'll post some more of the HTML editor commands here:
(Most are self-explanatory)

//Images:
string IMGSRC = "http://www.example.com/example.jpg";
HTMLEditor.document.ExecCommand("InsertImage", false,  IMGSRC);

//LINK:
string URL = "http://www.example.com";
string Text = "Example.com";

IHTMLTxtRange range =
                    doc.selection.createRange() as IHTMLTxtRange;
                    range.pasteHTML("<A href=\"" + URL + "\">" + Text + "</A>");
                    range.collapse(false);
                    range.select();

//HR:
HTMLEditor.document.ExecCommand("InsertHorizontalRule", false, null);

//ALIGN:
HTMLEditor.document.ExecCommand("JustifyLeft", false, null);
HTMLEditor.document.ExecCommand("JustifyRight", false, null);
HTMLEditor.document.ExecCommand("JustifyCenter", false, null);
HTMLEditor.document.ExecCommand("JustifyFull", false, null);





(if one of the mods could add that into the tutorial, that would be great ;) )
Was This Post Helpful? 2
  • +
  • -

#3 A7med Baraka  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 14-July 08

Posted 14 July 2008 - 04:01 AM

when i add this

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:
csharpview plainprint?
private IHTMLDocument2 doc;


there is 2 errors appers
Error 1 The type or namespace name 'mshtml' does not exist in the namespace 'System' (are you missing an assembly reference?) Form1InterActive Book.cs 8 14

Error 2 The type or namespace name 'IHTMLDocument2' could not be found (are you missing a using directive or an assembly reference?) Form1InterActive Book.cs 14 17


but i am adding the reference as u said ??

any advice ??
Was This Post Helpful? 0
  • +
  • -

#4 aj32  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 30
  • View blog
  • Posts: 577
  • Joined: 30-August 07

Posted 14 July 2008 - 05:47 AM

View PostA7med Baraka, on 14 Jul, 2008 - 07:01 AM, said:

when i add this

there is 2 errors appers
Error 1 The type or namespace name 'mshtml' does not exist in the namespace 'System' (are you missing an assembly reference?) Form1InterActive Book.cs 8 14

Error 2 The type or namespace name 'IHTMLDocument2' could not be found (are you missing a using directive or an assembly reference?) Form1InterActive Book.cs 14 17


but i am adding the reference as u said ??

any advice ??


It looks like your are trying to add System.mshtml it is only mshtml (e.g. using mshtml;. Once you get that in place the IHTMLDocument2 error will go away (IHTMDocument2 is a part of mshtml).

Hope that helps. :)
Was This Post Helpful? 0
  • +
  • -

#5 A7med Baraka  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 14-July 08

Posted 19 July 2008 - 04:57 AM

thnx i make it it should write MSHTML in capital
but i want to add audio , flash files ?? how can i make this
also i want to ask how i make the user inter the url of the image or the audio file or its location in the PC
Was This Post Helpful? 0
  • +
  • -

#6 Kirth  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 157
  • Joined: 09-July 08

Posted 12 September 2008 - 12:00 PM

View PostA7med Baraka, on 19 Jul, 2008 - 04:57 AM, said:

also i want to ask how i make the user inter the url of the image or the audio file or its location in the PC


You could put those in a folder called "images" and get them uploaded with the user's files?
Was This Post Helpful? 0
  • +
  • -

#7 mmenon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 29-January 09

Posted 29 January 2009 - 08:47 AM

View PostA7med Baraka, on 14 Jul, 2008 - 03:01 AM, said:

when i add this

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:
csharpview plainprint?
private IHTMLDocument2 doc;


there is 2 errors appers
Error 1 The type or namespace name 'mshtml' does not exist in the namespace 'System' (are you missing an assembly reference?) Form1InterActive Book.cs 8 14

Error 2 The type or namespace name 'IHTMLDocument2' could not be found (are you missing a using directive or an assembly reference?) Form1InterActive Book.cs 14 17


but i am adding the reference as u said ??

any advice ??





View Postaj32, on 7 Apr, 2008 - 06:22 AM, said:

Creating a wysiwyg HTML editor in C#

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

Posted Image

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:
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:

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.

Posted Image

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:

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:
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:

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 :)


Quote

thanks for this excellent tutorial. I was able to implement it just fine. I was wondering if there was a way to embed this windows form application in an aspx page. I found out an object tag that can be used to insert windows control library, can the same approach be used for windows form application too ?

This post has been edited by mmenon: 29 January 2009 - 08:44 AM

Was This Post Helpful? 0
  • +
  • -

#8 Public_account  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 37
  • Joined: 16-February 07

Posted 13 February 2009 - 08:09 AM

The full list of commands

2D-Position

Allows absolutely positioned elements to be moved by dragging.
AbsolutePosition

Sets an element's position property to "absolute."
BackColor

Sets or retrieves the background color of the current selection.
BlockDirLTR

Not currently supported.
BlockDirRTL

Not currently supported.
Bold

Toggles the current selection between bold and nonbold.
BrowseMode

Not currently supported.
ClearAuthenticationCache

Clears all authentication credentials from the cache. Applies only to execCommand.
Copy

Copies the current selection to the clipboard.
CreateBookmark

Creates a bookmark anchor or retrieves the name of a bookmark anchor for the current selection or insertion point.
CreateLink

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

Copies the current selection to the clipboard and then deletes it.
Delete

Deletes the current selection.
DirLTR

Not currently supported.
DirRTL

Not currently supported.
EditMode

Not currently supported.
FontName

Sets or retrieves the font for the current selection.
FontSize

Sets or retrieves the font size for the current selection.
ForeColor

Sets or retrieves the foreground (text) color of the current selection.
FormatBlock

Sets the current block format tag.
Indent

Increases the indent of the selected text by one indentation increment.
InlineDirLTR

Not currently supported.
InlineDirRTL

Not currently supported.
InsertButton

Overwrites a button control on the text selection.
InsertFieldset

Overwrites a box on the text selection.
InsertHorizontalRule

Overwrites a horizontal line on the text selection.
InsertIFrame

Overwrites an inline frame on the text selection.
InsertImage

Overwrites an image on the text selection.
InsertInputButton

Overwrites a button control on the text selection.
InsertInputCheckbox

Overwrites a check box control on the text selection.
InsertInputFileUpload

Overwrites a file upload control on the text selection.
InsertInputHidden

Inserts a hidden control on the text selection.
InsertInputImage

Overwrites an image control on the text selection.
InsertInputPassword

Overwrites a password control on the text selection.
InsertInputRadio

Overwrites a radio control on the text selection.
InsertInputReset

Overwrites a reset control on the text selection.
InsertInputSubmit

Overwrites a submit control on the text selection.
InsertInputText

Overwrites a text control on the text selection.
InsertMarquee

Overwrites an empty marquee on the text selection.
InsertOrderedList

Toggles the text selection between an ordered list and a normal format block.
InsertParagraph

Overwrites a line break on the text selection.
InsertSelectDropdown

Overwrites a drop-down selection control on the text selection.
InsertSelectListbox

Overwrites a list box selection control on the text selection.
InsertTextArea

Overwrites a multiline text input control on the text selection.
InsertUnorderedList

Toggles the text selection between an ordered list and a normal format block.
Italic

Toggles the current selection between italic and nonitalic.
JustifyCenter

Centers the format block in which the current selection is located.
JustifyFull

Not currently supported.
JustifyLeft

Left-justifies the format block in which the current selection is located.
JustifyNone

Not currently supported.
JustifyRight

Right-justifies the format block in which the current selection is located.
LiveResize

Causes the MSHTML Editor to update an element's appearance continuously during a resizing or moving operation, rather than updating only at the completion of the move or resize.
MultipleSelection

Allows for the selection of more than one site selectable element at a time when the user holds down the SHIFT or CTRL keys.
Open

Not currently supported.
Outdent

Decreases by one increment the indentation of the format block in which the current selection is located.
OverWrite

Toggles the text-entry mode between insert and overwrite.
Paste

Overwrites the contents of the clipboard on the current selection.
PlayImage

Not currently supported.
Print

Opens the print dialog box so the user can print the current page.
Redo

Not currently supported.
Refresh

Refreshes the current document.
RemoveFormat

Removes the formatting tags from the current selection.
RemoveParaFormat

Not currently supported.
SaveAs

Saves the current Web page to a file.
SelectAll

Selects the entire document.
SizeToControl

Not currently supported.
SizeToControlHeight

Not currently supported.
SizeToControlWidth

Not currently supported.
Stop

Not currently supported.
StopImage

Not currently supported.
StrikeThrough

Not currently supported.
Subscript

Not currently supported.
Superscript

Not currently supported.
UnBookmark

Removes any bookmark from the current selection.
Underline

Toggles the current selection between underlined and not underlined.
Undo

Not currently supported.
Unlink

Removes any hyperlink from the current selection.
Unselect

Clears the current selection.
Was This Post Helpful? 0
  • +
  • -

#9 Christian!  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 17-February 09

Posted 18 February 2009 - 05:23 AM

Great tutorial! Works fine... :^:
Was This Post Helpful? 0
  • +
  • -

#10 wrighty  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 09-December 08

Posted 23 March 2009 - 11:39 AM

any screen shots of this in action?

i dont think mine is working

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using mshtml;

namespace WindowsFormsApplication1
{
	public partial class Form1 : Form
	
		
	{
		private IHTMLDocument2 doc;

		public Form1()
		{
			InitializeComponent();
		}

		private void Form1_Load(object sender, EventArgs e)
		{
			HTMLEditor.DocumentText = "<html><body></body></html>"; 
			doc = 
			HTMLEditor.document.DomDocument as IHTMLDocument2;
			doc.designMode = "On";

		}
	}
}



thats my basic code is that correct?
Was This Post Helpful? 0
  • +
  • -

#11 wrighty  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 09-December 08

Posted 23 March 2009 - 01:12 PM

Give me a clue on the save using the
String SAVECONTENTS = HTMLEditor.DocumentText;

how do you call the rest of the save function?
Was This Post Helpful? 0
  • +
  • -

#12 RobinV  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 44
  • Joined: 21-May 08

Posted 30 March 2009 - 07:24 AM

View Postwrighty, on 23 Mar, 2009 - 12:12 PM, said:

Give me a clue on the save using the
String SAVECONTENTS = HTMLEditor.DocumentText;

how do you call the rest of the save function?

Think before asking
Was This Post Helpful? 0
  • +
  • -

#13 wrighty  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 09-December 08

Posted 30 March 2009 - 07:28 AM

HAHA ops i think by that point it was getting on top of me all sorted now thanks
Was This Post Helpful? 0
  • +
  • -

#14 jammmie999  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 117
  • Joined: 01-April 09

Posted 02 April 2009 - 07:55 AM

thanks for the great article see http://web.archive.o.../commandids.asp for full list of functions
Was This Post Helpful? 1
  • +
  • -

#15 kamprasad  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 29-April 09

Posted 29 April 2009 - 05:22 AM

Hi,

thanks for this excellent tutorial


This editor can support the spelling check option ?



--kamprasad--
Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »