• Home
 · 
• Internet/HTML
 · 
• Creating a WYSIWYG HTML Editor with 4 lines of code.

Creating a WYSIWYG HTML Editor with 4 lines of code.

As the user is typing the HTML code, it is updated in the web browser control immediately. Great for an HTML Editor or just for testing out code.

Rate Creating a WYSIWYG HTML Editor with 4 lines of code.

• 1
• 2
• 3
• 4
• 5

(4(4 Vote))

To make a WYSIWYG HTML editor, simply put a textbox and a web browser control (here named wb) on a form. Add a module to the project and put in the following code:

Sub Render()

  wb.Document.Script.Document.Clear

  wb.Document.Script.Document.Write Text1.text

  wb.Document.Script.Document.Close

  Exit Sub

End Sub

To use it, place this in the textbox's KeyPress or Change event (see below for details on this choice) event:
Render

Simple, isn't it? Now you can view your HTML code as you type it. It helps you to test out your HTML before putting it on your real page. Or you can use this in an actual editor to provide real-time previewing. 
And since it uses Micro$oft's web browser control, you can use HTML, CSS, JavaScript and ASP.
As mentioned above, this code can be used in the Textbox's Keypress or Change events. Use the Keypress event if you want to use it as a simple view-HTML-as-you-type kind of editor. If you're making an editor, place the Render in the Textbox's Change event to let the magic begin. If you want this in a project, I uploaded onehere.