I'm gonna show you how to easily setup a handy program in C#. What it will be doing is allow you to write HTML and show you the site as you write it ( real time ). It's surprisingly easy to do.
The concept: What we will have is two boxes in our forum. A richTextBox and a web browser. We will mainly be using the richTextBox TectChanged handle which will allow us to run code every time the text in the text box is changed. When the text is changed we will write all the text in the text box to a index.html file, then render that index.html in the webBrowser. This will give us a Real Time HTML Editor. So lets get started.
The first thing we need to do is add the richTextBox and webBrowser to the form. You can do this any way you want but i'll post a screen shot of how mine is laid out below.
The first thing we need to do is add the richTextBox and webBrowser to the form. You can do this any way you want but i'll post a screen shot of how mine is laid out below.
Now that that is laid out lets start the code. To keep things simple we only need to add one void, to get the one we need select the richTextBox and in the properties pane go to Events. Then look for the event called TextChanged and double click on it, you should be presented with the Form1.cs Source view like the image below.
Now inside of the richTextBox1_TextChanged void were gonna add the code for our Editor. view sourceprint?1string current_source = richTextBox1.Text;2 3StreamWriter stream = new StreamWriter("index.html");4stream.Write(current_source);5stream.Close();
This is getting the current HTML that has been typed into the richTextBox1.Text, then it writes it to a index.html file.
view sourceprint?1 string place = Directory.GetCurrentDirectory();2string url = place + "/index.html";
Now we find the location of the index.html file, so that we can render it in the webBrowser.
webBrowser1.Navigate(url);
And last but not least we load the HTML from the richTextBox into the webBrowser so it may be displayed on screen. Good luck (=
Complete void:
string current_source = richTextBox1.Text;02 03StreamWriter stream = new StreamWriter("index.html");04stream.Write(current_source);05stream.Close();06 07string place = Directory.GetCurrentDirectory();08string url = place + "/index.html";09 10webBrowser1.Navigate(url);
This is getting the current HTML that has been typed into the richTextBox1.Text, then it writes it to a index.html file.
view sourceprint?1 string place = Directory.GetCurrentDirectory();2string url = place + "/index.html";
Now we find the location of the index.html file, so that we can render it in the webBrowser.
webBrowser1.Navigate(url);
And last but not least we load the HTML from the richTextBox into the webBrowser so it may be displayed on screen. Good luck (=
Complete void:
string current_source = richTextBox1.Text;02 03StreamWriter stream = new StreamWriter("index.html");04stream.Write(current_source);05stream.Close();06 07string place = Directory.GetCurrentDirectory();08string url = place + "/index.html";09 10webBrowser1.Navigate(url);
Things to expand on:
- Try doing string recognition to help with tags, such as ( When user types "<html>" insert "\n</html>" into HTML )
- Add a FTP option so you can upload your HTML onto a server right from the program when you are done
- Toy with the font in the richTextBox to get a more eye pleasing editor.
I'll go more in depth and post follow up tutorials for adding more options to the editor, and string recognition like i mentioned before.
If you want to see an option added to the editor please comment below and tell me so i can do it in the next tutorial - Thank you - www.DilusWorld.co.cc
- Try doing string recognition to help with tags, such as ( When user types "<html>" insert "\n</html>" into HTML )
- Add a FTP option so you can upload your HTML onto a server right from the program when you are done
- Toy with the font in the richTextBox to get a more eye pleasing editor.
I'll go more in depth and post follow up tutorials for adding more options to the editor, and string recognition like i mentioned before.
If you want to see an option added to the editor please comment below and tell me so i can do it in the next tutorial - Thank you - www.DilusWorld.co.cc