Page 1 of 1

Live HTML Editor Edit and render HTML in real time, in C#

#1 hawksprite  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 7
  • View blog
  • Posts: 137
  • Joined: 11-September 09

Posted 03 February 2010 - 05:19 PM

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.

Posted Image

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.

Posted Image

Now inside of the richTextBox1_TextChanged void were gonna add the code for our Editor.

		string current_source = richTextBox1.Text;
		
		StreamWriter stream = new StreamWriter("index.html");
		stream.Write(current_source);
		stream.Close();



This is getting the current HTML that has been typed into the richTextBox1.Text, then it writes it to a index.html file.

                string place = Directory.GetCurrentDirectory();
		string 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;
		
		StreamWriter stream = new StreamWriter("index.html");
		stream.Write(current_source);
		stream.Close();
		
		string place = Directory.GetCurrentDirectory();
		string url = place + "/index.html";
		
		webBrowser1.Navigate(url);



Posted Image

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. Thanks for reading XD

Is This A Good Question/Topic? 4
  • +

Replies To: Live HTML Editor

#2 tygrogr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 05-February 10

Posted 05 February 2010 - 05:21 AM

View Posthawksprite, on 03 February 2010 - 04:19 PM, said:

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. Thanks for reading XD


Adding a FTP option is quite simple. You should use System.Net.FtpWebRequest and FtpWebResponse classes:

using System.Net; /* you must have this on the top */

FtpWebRequest UploadReq=(FtpWebRequest)WebRequest.Create(/* remote path */ "ftp://helloworld.com/x.html");
UploadReq.Credentials=new NetworkCredential(/* username */ "anonymous", /* password */ "anonymous");
UploadReq.Method=WebRequestMethods.Ftp.UploadFile;

byte[] pageContents=Encoding.UTF8.GetBytes(richTextBox1.Text);
UploadReq.ContentLength=pageContents.Length;

Stream requestStr=UploadReq.GetRequestStream();
requestStr.Write(pageContents,0,pageContents.Length);
requestStr.Close();

FtpWebResponse Result=(FtpWebResponse)UploadReq.GetResponse();
MessageBox.Show(Result.StatusDescription+"\n=============\n"+new StreamReader(Result.GetResponseStream()).ReadToEnd());



Was This Post Helpful? 0
  • +
  • -

#3 hawksprite  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 7
  • View blog
  • Posts: 137
  • Joined: 11-September 09

Posted 06 February 2010 - 08:56 PM

Thanks for that snippet, it was very helpful (=
Was This Post Helpful? 0
  • +
  • -

#4 BlakeRey  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 23
  • Joined: 08-February 10

Posted 09 February 2010 - 06:41 PM

Hey.

First off, nice tutorial.

I added in, like your suggestion, string recognition, only for line "<html>" to start with until I expand.

Here is my code:

           if (richTextBox1.Text.Contains("<html>")) // Only add if this exists.
            {
                if (richTextBox1.Text.Contains("</html>")) // Check if this already exists
                {
                }
                else
                {
                    richTextBox1.AppendText(Environment.NewLine + Environment.NewLine + "</html>"); // Add the string 2 lines down.
                   
                }


            }




How would I get it to put the cursor (blinking "I") between the tags. At the moment when you add "<html>" it add's "</html>" 2 line's down but also leaves the blinking "I" on after </html> I want it to go in between to two tags.

Would you be able to give me some advice?

Regards,
Blake.

This post has been edited by BlakeRey: 09 February 2010 - 06:43 PM

Was This Post Helpful? 0
  • +
  • -

#5 danny_kay1710  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 28
  • View blog
  • Posts: 358
  • Joined: 27-April 08

Posted 12 February 2010 - 04:02 AM

Blake,

Before you make the changes record the Selectionstart property of the textbox to an integer then after making your changes assign that integer value back to the Selectionstart property.

That should solve your issue with the cursor

Danny
Was This Post Helpful? 0
  • +
  • -

#6 hawksprite  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 7
  • View blog
  • Posts: 137
  • Joined: 11-September 09

Posted 17 February 2010 - 04:35 PM

View PostBlakeRey, on 10 February 2010 - 12:41 AM, said:

Hey.

First off, nice tutorial.

I added in, like your suggestion, string recognition, only for line "<html>" to start with until I expand.

Here is my code:

           if (richTextBox1.Text.Contains("<html>")) // Only add if this exists.
            {
                if (richTextBox1.Text.Contains("</html>")) // Check if this already exists
                {
                }
                else
                {
                    richTextBox1.AppendText(Environment.NewLine + Environment.NewLine + "</html>"); // Add the string 2 lines down.
                   
                }


            }




How would I get it to put the cursor (blinking "I") between the tags. At the moment when you add "<html>" it add's "</html>" 2 line's down but also leaves the blinking "I" on after </html> I want it to go in between to two tags.

Would you be able to give me some advice?

Regards,
Blake.


I agree with danny, if the tags are two lines apart when you find that there needs to be a tag added first get the line of the original "<html>" Then put the cursor down one line from there, that way it will show up in the center line.
Was This Post Helpful? 0
  • +
  • -

#7 Guest_Guest*


Reputation:

Posted 27 May 2010 - 03:50 PM

I'm trying to do something like this in a windows app instead of a web .net app. what do I need to include in the project to get it to recognize the Directory.GetCurrentDirectory()?
Was This Post Helpful? 0

#8 Themitchel0  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 107
  • Joined: 14-April 10

Posted 10 August 2010 - 06:07 AM

ok i showed someone that i know that is good in html, and when he tried it it would not let him run it in, he got a error saying that he didnt have permission to use the internet or something, and he could only run in administartor do you know why?
Was This Post Helpful? 0
  • +
  • -

#9 josh06  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 14
  • View blog
  • Posts: 139
  • Joined: 27-October 06

Posted 18 August 2010 - 09:04 AM

Great tutorial! Was brilliant.
Only trouble I got was the StreamWriter and this was because I didn't include the IO

Please could you add into your tutorial that you need to add
using System.IO
as beginners like me might not add that in otherwise.

Otherwise. Thanks!!
Was This Post Helpful? 0
  • +
  • -

#10 hawksprite  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 7
  • View blog
  • Posts: 137
  • Joined: 11-September 09

Posted 22 August 2010 - 11:04 AM

Thanks for all the feedback.
@Themitchel0 Hmm, im not sure why he would get that error, might be something buggy with the .net Framework installation on his computer.
@josh06 Good point, i'll be sure to add that.
Was This Post Helpful? 0
  • +
  • -

#11 Guest_laht*


Reputation:

Posted 26 February 2011 - 08:43 AM

hi! Im trying to do this but using to forms, one form with the richtext and another with the webform. The problem i'm getting is that since the webform is placed in Form2, it can't be found within Form1. Does anyone know how to make it look within Form2 to find the webform?
Was This Post Helpful? 0

Page 1 of 1