HTML stands for
H : Hyper
T : Text
M : Markup
L : Language.
The HTML language is an authoring language create documents on the World Wide Web (WWW). HTML defines the structure and layout of a web document using a variety of tags and attributes. HTML documents contain two things that are:
- HTML tags with their attributes
- Plain text
HTML was designed in 1992 by Tim Berners-Lee.
That is an explanation of HTML and its history.
Now let's explain what a HTML Editor is.
HTML Editor
HTML can be edited using a professional HTML editor like:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
We can also use Notepad (Windows PC) or TextEdit (Mac) to edit a HTML page. But our purpose is to create our own HTML Editor using WPF, that will better than NotePad and TextEdit.
Use the following procedure to create your own HTML Editor:
- Open Visual Studio and go to "File" -> "New" -> "Project..." or press Ctrl+Shift+N.
- Now select WPF Application from the Visual C# Templates and provide any name for the file, such as WPF_HTML_EDITOR.
- Now you will see the MainWindow.xaml file, as in the following:
- Now just drag and drop a TextBox using Toolbox onto the form. The TextBox will provide the vital role of editing our HTML text and increase its height and width of this TextBox because the TextBox should be Multiline.
Note: In WPF, to get a Multiline TextBox you need to change some property of the TextBox because the TextBox is not multiline by default even if you change its width and height.
Go to the Property Window and set the properties as in the following:
- TextWrapping as a "Wrap": This property arranges the texts written in the text box.
- AcceptsReturn Check-Box as checked: This property gets or sets a value indicating whether pressing Enter in a multiline TextBox control creates a new line of text in the control or activates the default button for the form.
- AcceptsTab Check-Box as checked: This property gets or sets a value indicating whether pressing the Tab key enters a Tab character into the control instead of moving the focus to the next control in the tab order. This is a dependency property.
The following figure shows how to set the TextWrapping, AcceptsReturn and AcceptsTab properties:
- In the next step you need to create some Buttons and Combo Boxes to make this HTML Editor easier. I have created some buttons on the form that are:
- NEW: This button creates a new HTML file.
- OPEN: This button opens an already saved HTML file.
- SAVE: To save the HTML file at a specific location.
- SAVE AS: To save the same copy of the file at a location with the same or a different name.
- CLOSE: To close the opened HTML File.
HTML TAG BUTTONS: Some HTML Tag buttons I have also created are:
- B: To make the text bold.
- I: To make the text italicized.
- U: To underline the text.
- P: To create a paragraph.
- Link: To create a link.
- BR: To create a break; a </br> tag that breaks the HTML line.
For the heading tag and FormTag just drag and drop a ComboBox from the toolbox.
- Heading Tag ComboBox: Insert some Items by using the Item property of a ComboBox.
Click on the Item property of the Heading ComboBox and add the following 7 items:
--Heading--
H1
H2
H3
H4
H5
H6
Note: The --Heading-- item is the default but it will not be used.
- Form Tag ComboBox: This ComoBox will facilitate the design of any HTML Form to easily Insert some items using the Item property of the ComboBox. Click on the Item Property of the ComboBox and add the following items:
--FORM TAGS--
Form
Text Box
Password
CheckBox
Radio Button
Button
Drop Down
Text Area
Note: The --FORM TAGS-- item is the default but it will not be used.
- Preview: Drag and Drop one button to see the preview of the designed HTML Document.
My Designed Form: The complete form I have designed is as follows.
That has explained the design part of the HTML editor. Now for the code.
When the HTML editor will be run some code will already exist in the TextBox; that code will be as follows:
<html>
<head>
<title>MyWebsite1</title>
</head>
<body>
</body>
</html>
And also the save button will be disabled.
To get this code at runtime (by default) and the save button initially disabled you need to write the following code in the constructor of the MainWindow. The code is written as follows:
public MainWindow()
{
InitializeComponent();
SaveBtn.IsEnabled = false;
//by default Save Button will be disable at the starting time
textBox1.Text = "<HTML>\n\t<HEAD>\n\t\t<TITLE>MyWebsite1</TITLE>\n\t</HEAD>\n\n\n\t<BODY>\n\n\n\t</BODY>\n</HTML>";
}
After writing into the TextBox, the save button will be enabled so you need to write the following code on the TextChanged event of the TextBox.
private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
{
SaveBtn.IsEnabled = true;
}
As I mentioned above, I have used some buttons and combo boxes so now I need to fire some events on the buttons and Combo Box. The following code is for creating a new file, opening a file, saving (and save-as) a file and close the file.
NEW
The following explains what is done on the Click event of the NEW button.
- Check whether the old file is saved
- If the file is not saved then first save the old file
- Otherwise create a new file
The following is the code to do that (on the Click Event of the NEW button):
private void NewBtn_Click(object sender, RoutedEventArgs e)
{
if (SaveBtn.IsEnabled == true)k
{
MessageBoxResult MsgBoxresult = MessageBox.Show("Do you want to save content or not",
"Do you want to save file", MessageBoxButton.YesNo,MessageBoxImage.Question);
if (MsgBoxresult == MessageBoxResult.Yes)
{
MainWindow obj = new MainWindow();
Microsoft.Win32.SaveFileDialog sfd = new Microsoft.Win32.SaveFileDialog();
sfd.DefaultExt = ".htm";
sfd.Filter = "HTML File (.html)|*.html|
HTM Files (.htm)|*.htm";
if (sfd.ShowDialog() == true && sfd.FileName.Length > 0)
{
File.WriteAllText(sfd.FileName, textBox1.Text);
}
}
textBox1.Text = string.Empty;
SaveBtn.IsEnabled = false;
}
}
OPEN
The following explains what is done on the Click event of the OPEN button.
- Check whether the old file is saved
- If the file has not been saved then first save the old file
- Otherwise open a new file
The following is the code to do that (on the Click Event of the OPEN button):
private void OpenBtn_Click(object sender, RoutedEventArgs e)
{
if (textBox1.Text != string.Empty)
{
MainWindow obj = new MainWindow();
Microsoft.Win32.SaveFileDialog sfd = new Microsoft.Win32.SaveFileDialog();
sfd.DefaultExt = ".htm";
sfd.Filter = "HTML File (.html)|*.html| HTM Files (.htm)|*.htm";
if (sfd.ShowDialog() == true && sfd.FileName.Length > 0)
{
File.WriteAllText(sfd.FileName, textBox1.Text);
savepath = sfd.FileName.ToString();
save = true;
}
}
Microsoft.Win32.OpenFileDialog ofd = new Microsoft.Win32.OpenFileDialog();
ofd.DefaultExt = ".htm";
ofd.Filter = "HTML File (.html)|*.html| HTM Files (.htm)|*.htm";
if (ofd.ShowDialog() == true)
{
StreamReader StreamReader1 = new StreamReader(ofd.FileName, Encoding.Default);
textBox1.Text = StreamReader1.ReadToEnd();
save = true;
savepath = ofd.FileName.ToString();
}
SaveBtn.IsEnabled = false;
save = true;
}
CLOSE
The following explains what is done on the Click event of the CLOSE button.
- Check whether the old file is saved
- If the file has not been saved then first save the old file
- Otherwise close
The following is the code to do that (on the Click Event of the CLOSE button):
private void CloseBtn_Click(object sender, RoutedEventArgs e)
{
if (SaveBtn.IsEnabled == true)
{
MessageBoxResult MsgBoxresult = MessageBox.Show("Do you want to save content or not",
"Do you want to save file", MessageBoxButton.YesNoCancel, MessageBoxImage.Question);
if (MsgBoxresult == MessageBoxResult.Yes)
{
MainWindow obj = new MainWindow();
Microsoft.Win32.SaveFileDialog sfd = new Microsoft.Win32.SaveFileDialog();
sfd.DefaultExt = ".htm";
sfd.Filter = "HTML File (.html)|*.html| HTM Files (.htm)|*.htm";
if (sfd.ShowDialog() == true && sfd.FileName.Length > 0)
{
File.WriteAllText(sfd.FileName, textBox1.Text);
}
this.Close();
}
else if (MsgBoxresult == MessageBoxResult.No)
{
this.Close();
}
else
{
}
}
}
SAVE
The following explains what is done on the Click event of the SAVE button.
- Check whether this file has already been saved.
- If it has already been saved then overwrite the file.
- If not then save it at the specific location after choosing from the save file dialog.
The following is the code to do that (on the Click Event of the SAVE button):
private void SaveBtn_Click(object sender, RoutedEventArgs e)
{
if (save == false)
{
Microsoft.Win32.SaveFileDialog sfd = new Microsoft.Win32.SaveFileDialog();
sfd.DefaultExt = ".htm";
Join the conversation! Your thoughts help the community grow.