Click here to Skip to main content
15,891,864 members
Articles / Programming Languages / C#

WYSIWYG HTML Editor

Rate me:
Please Sign up or sign in to vote.
4.47/5 (21 votes)
6 Jan 2006 252.4K   8.9K   91  
Building a simple WYSIWYG (What You See Is What You Get) HTML Editor in C#.
using System;
using System.Drawing;
using System.Collections;
using System.ComponentModel;
using System.Windows.Forms;
using System.Data;
using System.IO;

namespace HtmlEditor
{
	/// <summary>
	/// Summary description for Form1.
	/// </summary>
	public class Form1 : System.Windows.Forms.Form
	{
		private AxSHDocVw.AxWebBrowser axWebBrowser1;
		private System.Windows.Forms.ToolBar toolBar1;
		private System.Windows.Forms.ImageList imageList1;
		private System.Windows.Forms.ToolBarButton toolBarButton1;
		private System.Windows.Forms.ToolBarButton toolBarButton3;
		private System.Windows.Forms.ToolBarButton toolBarButton4;
		private System.Windows.Forms.ToolBarButton toolBarButton5;
		private System.Windows.Forms.ToolBarButton toolBarButton6;
		private System.Windows.Forms.ToolBarButton toolBarButton7;
		private System.Windows.Forms.ToolBarButton toolBarButton8;
		private System.Windows.Forms.ToolBarButton toolBarButton9;
		private System.Windows.Forms.ToolBarButton toolBarButton10;
		private System.Windows.Forms.ToolBarButton toolBarButton11;
		private System.Windows.Forms.ToolBarButton toolBarButton12;
		private System.Windows.Forms.ToolBarButton toolBarButton13;
		private System.Windows.Forms.ToolBarButton toolBarButton14;
		private System.Windows.Forms.ToolBarButton toolBarButton15;
		private System.Windows.Forms.ToolBarButton toolBarButton16;
		private System.Windows.Forms.ToolBarButton toolBarButton17;
		private System.Windows.Forms.ToolBarButton toolBarButton18;
		private System.Windows.Forms.ToolBarButton toolBarButton19;
		private System.Windows.Forms.ToolBarButton toolBarButton20;
		private System.Windows.Forms.ToolBarButton toolBarButton21;
		private System.Windows.Forms.OpenFileDialog openFileDialog1;
		private System.Windows.Forms.SaveFileDialog saveFileDialog1;
		private System.Windows.Forms.TabControl tabControl1;
		private System.Windows.Forms.TabPage tabPage1;
		private System.Windows.Forms.TabPage tabPage2;
		private System.Windows.Forms.TextBox textBox1;
		private System.Windows.Forms.TabPage tabPage3;
		private System.Windows.Forms.Label label1;
		private System.Windows.Forms.Label label2;
		private System.Windows.Forms.Label label3;
		private System.Windows.Forms.LinkLabel linkLabel1;
		private System.Windows.Forms.LinkLabel linkLabel2;
		private System.Windows.Forms.PictureBox pictureBox1;
		private System.ComponentModel.IContainer components;

		public Form1()
		{
			//
			// Required for Windows Form Designer support
			//
			InitializeComponent();
		}

		/// <summary>
		/// Clean up any resources being used.
		/// </summary>
		protected override void Dispose( bool disposing )
		{
			if( disposing )
			{
				if (components != null) 
				{
					components.Dispose();
				}
			}
			base.Dispose( disposing );
		}

		#region Windows Form Designer generated code
		/// <summary>
		/// Required method for Designer support - do not modify
		/// the contents of this method with the code editor.
		/// </summary>
		private void InitializeComponent()
		{
			this.components = new System.ComponentModel.Container();
			System.Resources.ResourceManager resources = new System.Resources.ResourceManager(typeof(Form1));
			this.axWebBrowser1 = new AxSHDocVw.AxWebBrowser();
			this.toolBar1 = new System.Windows.Forms.ToolBar();
			this.toolBarButton21 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton1 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton17 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton3 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton4 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton5 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton19 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton6 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton7 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton18 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton8 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton9 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton10 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton20 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton11 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton12 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton13 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton14 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton15 = new System.Windows.Forms.ToolBarButton();
			this.toolBarButton16 = new System.Windows.Forms.ToolBarButton();
			this.imageList1 = new System.Windows.Forms.ImageList(this.components);
			this.openFileDialog1 = new System.Windows.Forms.OpenFileDialog();
			this.saveFileDialog1 = new System.Windows.Forms.SaveFileDialog();
			this.tabControl1 = new System.Windows.Forms.TabControl();
			this.tabPage1 = new System.Windows.Forms.TabPage();
			this.tabPage2 = new System.Windows.Forms.TabPage();
			this.textBox1 = new System.Windows.Forms.TextBox();
			this.tabPage3 = new System.Windows.Forms.TabPage();
			this.label1 = new System.Windows.Forms.Label();
			this.label2 = new System.Windows.Forms.Label();
			this.label3 = new System.Windows.Forms.Label();
			this.linkLabel1 = new System.Windows.Forms.LinkLabel();
			this.linkLabel2 = new System.Windows.Forms.LinkLabel();
			this.pictureBox1 = new System.Windows.Forms.PictureBox();
			((System.ComponentModel.ISupportInitialize)(this.axWebBrowser1)).BeginInit();
			this.tabControl1.SuspendLayout();
			this.tabPage1.SuspendLayout();
			this.tabPage2.SuspendLayout();
			this.tabPage3.SuspendLayout();
			this.SuspendLayout();
			// 
			// axWebBrowser1
			// 
			this.axWebBrowser1.ContainingControl = this;
			this.axWebBrowser1.Dock = System.Windows.Forms.DockStyle.Fill;
			this.axWebBrowser1.Enabled = true;
			this.axWebBrowser1.Location = new System.Drawing.Point(0, 28);
			this.axWebBrowser1.OcxState = ((System.Windows.Forms.AxHost.State)(resources.GetObject("axWebBrowser1.OcxState")));
			this.axWebBrowser1.Size = new System.Drawing.Size(512, 415);
			this.axWebBrowser1.TabIndex = 0;
			// 
			// toolBar1
			// 
			this.toolBar1.Appearance = System.Windows.Forms.ToolBarAppearance.Flat;
			this.toolBar1.Buttons.AddRange(new System.Windows.Forms.ToolBarButton[] {
																						this.toolBarButton21,
																						this.toolBarButton1,
																						this.toolBarButton17,
																						this.toolBarButton3,
																						this.toolBarButton4,
																						this.toolBarButton5,
																						this.toolBarButton19,
																						this.toolBarButton6,
																						this.toolBarButton7,
																						this.toolBarButton18,
																						this.toolBarButton8,
																						this.toolBarButton9,
																						this.toolBarButton10,
																						this.toolBarButton20,
																						this.toolBarButton11,
																						this.toolBarButton12,
																						this.toolBarButton13,
																						this.toolBarButton14,
																						this.toolBarButton15,
																						this.toolBarButton16});
			this.toolBar1.DropDownArrows = true;
			this.toolBar1.ImageList = this.imageList1;
			this.toolBar1.Location = new System.Drawing.Point(0, 0);
			this.toolBar1.Name = "toolBar1";
			this.toolBar1.ShowToolTips = true;
			this.toolBar1.Size = new System.Drawing.Size(512, 28);
			this.toolBar1.TabIndex = 1;
			this.toolBar1.TextAlign = System.Windows.Forms.ToolBarTextAlign.Right;
			this.toolBar1.ButtonClick += new System.Windows.Forms.ToolBarButtonClickEventHandler(this.toolBar1_ButtonClick);
			// 
			// toolBarButton21
			// 
			this.toolBarButton21.ImageIndex = 10;
			this.toolBarButton21.ToolTipText = "Open";
			// 
			// toolBarButton1
			// 
			this.toolBarButton1.ImageIndex = 0;
			this.toolBarButton1.ToolTipText = "Save";
			// 
			// toolBarButton17
			// 
			this.toolBarButton17.Style = System.Windows.Forms.ToolBarButtonStyle.Separator;
			// 
			// toolBarButton3
			// 
			this.toolBarButton3.ImageIndex = 2;
			this.toolBarButton3.ToolTipText = "Cut";
			// 
			// toolBarButton4
			// 
			this.toolBarButton4.ImageIndex = 3;
			this.toolBarButton4.ToolTipText = "Copy";
			// 
			// toolBarButton5
			// 
			this.toolBarButton5.ImageIndex = 4;
			this.toolBarButton5.ToolTipText = "Paste";
			// 
			// toolBarButton19
			// 
			this.toolBarButton19.Style = System.Windows.Forms.ToolBarButtonStyle.Separator;
			// 
			// toolBarButton6
			// 
			this.toolBarButton6.ImageIndex = 6;
			this.toolBarButton6.ToolTipText = "Undo";
			// 
			// toolBarButton7
			// 
			this.toolBarButton7.ImageIndex = 5;
			this.toolBarButton7.ToolTipText = "Redo";
			// 
			// toolBarButton18
			// 
			this.toolBarButton18.Style = System.Windows.Forms.ToolBarButtonStyle.Separator;
			// 
			// toolBarButton8
			// 
			this.toolBarButton8.ImageIndex = 7;
			this.toolBarButton8.ToolTipText = "Bold";
			// 
			// toolBarButton9
			// 
			this.toolBarButton9.ImageIndex = 8;
			this.toolBarButton9.ToolTipText = "Italic";
			// 
			// toolBarButton10
			// 
			this.toolBarButton10.ImageIndex = 9;
			this.toolBarButton10.ToolTipText = "Underline";
			// 
			// toolBarButton20
			// 
			this.toolBarButton20.Style = System.Windows.Forms.ToolBarButtonStyle.Separator;
			// 
			// toolBarButton11
			// 
			this.toolBarButton11.Text = "1";
			this.toolBarButton11.ToolTipText = "Font Size";
			// 
			// toolBarButton12
			// 
			this.toolBarButton12.Text = "2";
			this.toolBarButton12.ToolTipText = "Font Size";
			// 
			// toolBarButton13
			// 
			this.toolBarButton13.Text = "3";
			this.toolBarButton13.ToolTipText = "Font Size";
			// 
			// toolBarButton14
			// 
			this.toolBarButton14.Text = "4";
			this.toolBarButton14.ToolTipText = "Font Size";
			// 
			// toolBarButton15
			// 
			this.toolBarButton15.Text = "5";
			// 
			// toolBarButton16
			// 
			this.toolBarButton16.Text = "6";
			// 
			// imageList1
			// 
			this.imageList1.ImageSize = new System.Drawing.Size(16, 16);
			this.imageList1.ImageStream = ((System.Windows.Forms.ImageListStreamer)(resources.GetObject("imageList1.ImageStream")));
			this.imageList1.TransparentColor = System.Drawing.Color.Transparent;
			// 
			// openFileDialog1
			// 
			this.openFileDialog1.Title = "Open HTML File";
			this.openFileDialog1.FileOk += new System.ComponentModel.CancelEventHandler(this.openFileDialog1_FileOk);
			// 
			// saveFileDialog1
			// 
			this.saveFileDialog1.Title = "Save HTML File";
			this.saveFileDialog1.FileOk += new System.ComponentModel.CancelEventHandler(this.saveFileDialog1_FileOk);
			// 
			// tabControl1
			// 
			this.tabControl1.Controls.Add(this.tabPage1);
			this.tabControl1.Controls.Add(this.tabPage2);
			this.tabControl1.Controls.Add(this.tabPage3);
			this.tabControl1.Dock = System.Windows.Forms.DockStyle.Fill;
			this.tabControl1.Location = new System.Drawing.Point(0, 0);
			this.tabControl1.Name = "tabControl1";
			this.tabControl1.SelectedIndex = 0;
			this.tabControl1.Size = new System.Drawing.Size(520, 469);
			this.tabControl1.TabIndex = 2;
			this.tabControl1.SelectedIndexChanged += new System.EventHandler(this.tabControl1_SelectedIndexChanged);
			// 
			// tabPage1
			// 
			this.tabPage1.Controls.Add(this.axWebBrowser1);
			this.tabPage1.Controls.Add(this.toolBar1);
			this.tabPage1.Location = new System.Drawing.Point(4, 22);
			this.tabPage1.Name = "tabPage1";
			this.tabPage1.Size = new System.Drawing.Size(512, 443);
			this.tabPage1.TabIndex = 0;
			this.tabPage1.Text = "Editor View";
			// 
			// tabPage2
			// 
			this.tabPage2.Controls.Add(this.textBox1);
			this.tabPage2.Location = new System.Drawing.Point(4, 22);
			this.tabPage2.Name = "tabPage2";
			this.tabPage2.Size = new System.Drawing.Size(528, 339);
			this.tabPage2.TabIndex = 1;
			this.tabPage2.Text = "Source View";
			// 
			// textBox1
			// 
			this.textBox1.Dock = System.Windows.Forms.DockStyle.Fill;
			this.textBox1.Location = new System.Drawing.Point(0, 0);
			this.textBox1.Multiline = true;
			this.textBox1.Name = "textBox1";
			this.textBox1.ReadOnly = true;
			this.textBox1.Size = new System.Drawing.Size(528, 339);
			this.textBox1.TabIndex = 0;
			this.textBox1.Text = "";
			// 
			// tabPage3
			// 
			this.tabPage3.Controls.Add(this.pictureBox1);
			this.tabPage3.Controls.Add(this.linkLabel2);
			this.tabPage3.Controls.Add(this.linkLabel1);
			this.tabPage3.Controls.Add(this.label3);
			this.tabPage3.Controls.Add(this.label2);
			this.tabPage3.Controls.Add(this.label1);
			this.tabPage3.Location = new System.Drawing.Point(4, 22);
			this.tabPage3.Name = "tabPage3";
			this.tabPage3.Size = new System.Drawing.Size(512, 443);
			this.tabPage3.TabIndex = 2;
			this.tabPage3.Text = "About";
			// 
			// label1
			// 
			this.label1.Location = new System.Drawing.Point(208, 80);
			this.label1.Name = "label1";
			this.label1.Size = new System.Drawing.Size(80, 16);
			this.label1.TabIndex = 0;
			this.label1.Text = "Shefer Sytems";
			// 
			// label2
			// 
			this.label2.Font = new System.Drawing.Font("Microsoft Sans Serif", 9.75F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((System.Byte)(177)));
			this.label2.Location = new System.Drawing.Point(168, 56);
			this.label2.Name = "label2";
			this.label2.Size = new System.Drawing.Size(168, 24);
			this.label2.TabIndex = 1;
			this.label2.Text = "Author: Shlomo Schwarcz";
			// 
			// label3
			// 
			this.label3.Font = new System.Drawing.Font("Aharoni", 20.25F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((System.Byte)(177)));
			this.label3.Location = new System.Drawing.Point(64, 16);
			this.label3.Name = "label3";
			this.label3.Size = new System.Drawing.Size(392, 23);
			this.label3.TabIndex = 2;
			this.label3.Text = "Opne Source C# HTML Editor";
			// 
			// linkLabel1
			// 
			this.linkLabel1.LinkBehavior = System.Windows.Forms.LinkBehavior.HoverUnderline;
			this.linkLabel1.Location = new System.Drawing.Point(160, 416);
			this.linkLabel1.Name = "linkLabel1";
			this.linkLabel1.Size = new System.Drawing.Size(168, 16);
			this.linkLabel1.TabIndex = 3;
			this.linkLabel1.TabStop = true;
			this.linkLabel1.Text = "http://www.shefertech.com";
			this.linkLabel1.LinkClicked += new System.Windows.Forms.LinkLabelLinkClickedEventHandler(this.linkLabel1_LinkClicked);
			// 
			// linkLabel2
			// 
			this.linkLabel2.LinkBehavior = System.Windows.Forms.LinkBehavior.HoverUnderline;
			this.linkLabel2.Location = new System.Drawing.Point(144, 392);
			this.linkLabel2.Name = "linkLabel2";
			this.linkLabel2.Size = new System.Drawing.Size(184, 16);
			this.linkLabel2.TabIndex = 5;
			this.linkLabel2.TabStop = true;
			this.linkLabel2.Text = "shlomo.schwarcz@shefertech.com";
			this.linkLabel2.LinkClicked += new System.Windows.Forms.LinkLabelLinkClickedEventHandler(this.linkLabel2_LinkClicked);
			// 
			// pictureBox1
			// 
			this.pictureBox1.Image = ((System.Drawing.Image)(resources.GetObject("pictureBox1.Image")));
			this.pictureBox1.Location = new System.Drawing.Point(32, 104);
			this.pictureBox1.Name = "pictureBox1";
			this.pictureBox1.Size = new System.Drawing.Size(448, 272);
			this.pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
			this.pictureBox1.TabIndex = 6;
			this.pictureBox1.TabStop = false;
			// 
			// Form1
			// 
			this.AutoScaleBaseSize = new System.Drawing.Size(5, 13);
			this.ClientSize = new System.Drawing.Size(520, 469);
			this.Controls.Add(this.tabControl1);
			this.Name = "Form1";
			this.Text = "Shefer HTML Editor";
			this.Load += new System.EventHandler(this.Form1_Load);
			((System.ComponentModel.ISupportInitialize)(this.axWebBrowser1)).EndInit();
			this.tabControl1.ResumeLayout(false);
			this.tabPage1.ResumeLayout(false);
			this.tabPage2.ResumeLayout(false);
			this.tabPage3.ResumeLayout(false);
			this.ResumeLayout(false);

		}
		#endregion

		/// <summary>
		/// The main entry point for the application.
		/// </summary>
		[STAThread]
		static void Main() 
		{
			Application.Run(new Form1());
		}

		private void Form1_Load(object sender, System.EventArgs e)
		{
			object path = Directory.GetCurrentDirectory() +  "\\test.htm";
			object missing = System.Reflection.Missing.Value;
			this.axWebBrowser1.Navigate2(ref path, ref missing, ref missing, ref missing, ref missing);		
			mshtml.HTMLDocumentClass doc;
			doc = (mshtml.HTMLDocumentClass)this.axWebBrowser1.Document;
			doc.designMode = "On";		// This turns the control into an editor
		}

		private void toolBar1_ButtonClick(object sender, System.Windows.Forms.ToolBarButtonClickEventArgs e)
		{
			mshtml.HTMLDocumentClass doc = (mshtml.HTMLDocumentClass)this.axWebBrowser1.Document;
			object empty = null;
			switch (e.Button.ImageIndex)
			{
				case 10:		// Open
					this.openFileDialog1.ShowDialog();
					break;

				case 0:			// Save
					this.saveFileDialog1.ShowDialog();
					break;

				case 2:		// Cut
					doc.execCommand("Cut" ,false, empty);
					break;

				case 3:		// Copy
					doc.execCommand("Copy" ,false, empty);
					break;

				case 4:		// Paste
					doc.execCommand("Paste" ,false, empty);
					break;

				case 7:		// Bold
					doc.execCommand("Bold" ,false, empty);
					break;

				case 8:		// Italic
					doc.execCommand("Italic" ,false, empty);
					break;

				case 9:		// Underline
					doc.execCommand("Underline" ,false, empty);
					break;

				case 6:		// Undo
					doc.execCommand("Undo" ,false, empty);
					break;

				case 5:		// Redo
					doc.execCommand("Redo" ,false, empty);
					break;
			}

			if (e.Button.Text != "")
			{				
				doc.execCommand("FontSize" ,false, (object)e.Button.Text);
			}
		}

		private void openFileDialog1_FileOk(object sender, System.ComponentModel.CancelEventArgs e)
		{
			try
			{
				object path = this.openFileDialog1.FileName;
				object missing = System.Reflection.Missing.Value;
				this.axWebBrowser1.Navigate2(ref path, ref missing, ref missing, ref missing, ref missing);		
			}
			catch(Exception ex)
			{
				MessageBox.Show(ex.Message, "Error");
				return;
			}
		}

		private void saveFileDialog1_FileOk(object sender, System.ComponentModel.CancelEventArgs e)
		{
			try
			{
				string filename = this.saveFileDialog1.FileName;
				StreamWriter file = new StreamWriter(filename, false, System.Text.Encoding.Unicode);
				mshtml.HTMLDocumentClass doc = (mshtml.HTMLDocumentClass)this.axWebBrowser1.Document;
				string str = "<body>" + doc.IHTMLDocument2_body.innerHTML + "</body>";
				file.Write(str);
				file.Close();
			}
			catch(Exception ex)
			{
				MessageBox.Show(ex.Message, "Error");
				return;
			}
		}

		private void tabControl1_SelectedIndexChanged(object sender, System.EventArgs e)
		{
			try
			{
				if (this.tabControl1.SelectedIndex == 1)	// Code View
				{
					mshtml.HTMLDocumentClass doc = (mshtml.HTMLDocumentClass)this.axWebBrowser1.Document;
					this.textBox1.Text = "<body>" + doc.IHTMLDocument2_body.innerHTML + "</body>";
				}
			}
			catch(Exception ex)
			{
				MessageBox.Show(ex.Message, "Error");
				return;
			}
		}

		private void linkLabel2_LinkClicked(object sender, System.Windows.Forms.LinkLabelLinkClickedEventArgs e)
		{
			System.Diagnostics.Process.Start("mailto:shlomo.schwarcz@shefertech.com");				
		}

		private void linkLabel1_LinkClicked(object sender, System.Windows.Forms.LinkLabelLinkClickedEventArgs e)
		{
			System.Diagnostics.Process.Start("http://www.shefertech.com");		
		}
	}
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Israel Israel
Shlomo had worked for several years as a software engineer and project manager, developing software for the enterprise market, in Microsoft.NET and Java J2EE environment. Before establishing Shefer’s SAP department, Shlomo worked at SAP Labs and took part of the NetWeaver and Enterprise Portal development team.

Shlomo has many years of experience with SAP customers and has also teaches official SAP courses around the world.


Comments and Discussions