Using the HTML Editor Server Control | ASP. NET Solutions - 24 Case Studies. Best Practices for Developers

Now that you have an HTML editing server control, let's look at how to use it.

Before you can use the control in Visual Studio .NET, you need to add it to the tool box. Once the control is added to the tool box, it can be added to any Web Form by dragging it from the tool box and dropping it on the form. The control can be added to the tool box by following these steps.

Right-click the Toolbox panel of Visual Studio .NET and select Add Tab from the context menu that appears. This should add a new tab at the bottom of the tool box.
Give the tab a name, such as HTML Editor.
Click the tab you created to open it.
Right-click the Toolbox panel again. This time, select Customize Toolbox from the context menu.
From the dialog box that appears, select the .NET Framework Components tab.
Now click the Browse button and locate the .dll file containing the HTML editor custom server control, select it, and click OK. This should add an icon for the HTML editor to your tool box.

To distribute the control for development, it is necessary only to copy the .dll file generated when the control is compiled to the other computer. It can then be used by following the preceding steps.

Creating a Simple HTML Editor

Now let's create an application that uses the server control that we have implemented. To do this, start by creating a new Web application. For our example, I will use a VB Web application, but any .NET-compatible Web application will work just as well. Once the server control has been implemented, it can be accessed and used with any .NET language.

Once you have created the Web application, using the HTML editor control is as simple as dragging and dropping it on the Web Form and then setting the Width, Height, EditorCssClass, and MenuCssClass properties. Listing 19.3 shows the .aspx file for a sample editor.

Listing 19.3 .aspx File for Sample HTML Editing Application

 <%@   Register TagPrefix="cc1"   Namespace="HTML_EditorVB"   Assembly="HTML_EditorVB" %> <%@   Page Language="vb"   AutoEventWireup="false"   Codebehind="WebForm1.aspx.vb"   Inherits="HTML_EditorApp.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>   <head>     <title>WebForm1</title>     <meta       content="Microsoft Visual Studio.NET 7.0"       name="GENERATOR"     >     <meta       content="Visual Basic 7.0"       name="CODE_LANGUAGE"     >     <meta content="JavaScript" name="vs_defaultClientScript">     <meta       content="http://schemas.microsoft.com/intellisense/ie5"       name="vs_targetSchema"     >     <link       href="StyleSheet1.css"       type="text/css"       rel="stylesheet"     >   </head>   <body bgcolor="blue" ms_positioning="GridLayout">     <form  method="post" runat="server">       <cc1:html_editorvb                  style="LEFT: 88px; POSITION: absolute; TOP: 16px"         runat="server"         width="500"         height="400"         editorcss         menucss       >       </cc1:html_editorvb>     </form>   </body> </html>

Loading and storing the edited HTML is fairly straightforward. The HTML is loaded in the Page_Load event handler, and stored in the event handler for the Update event of our HTML editor server control. Listing 19.4 shows the code behind the file for loading and storing the HTML file.

Listing 19.4 Code behind the File for the Sample HTML Editor Application

 Imports System.IO Public Class WebForm1     Inherits System.Web.UI.Page     Protected WithEvents HTML_EditorVB1 _         As HTML_EditorVB.HTML_EditorVB     Private Sub Page_Load( _         ByVal sender As System.Object, _         ByVal e As System.EventArgs) Handles MyBase.Load         'Open File         Dim strFileName As String         strFileName = Page.MapPath("test.htm")         Dim objFile As New FileStream(strFileName, _             FileMode.OpenOrCreate, FileAccess.Read, _             FileShare.ReadWrite)         Dim objReader As New StreamReader(objFile)         'Read HTML         HTML_EditorVB1.Text = objReader.ReadToEnd()         'Close File         objReader.Close()         objFile.Close()     End Sub     Private Sub HTML_EditorVB1_Update(ByVal sender As Object, _         ByVal e As System.EventArgs) _         Handles HTML_EditorVB1.Update         'Open File         Dim strFileName As String         ' Page.MapPath() is OK for low traffic sites, for         '   high traffic situations it should be cached.         strFileName = Page.MapPath("test.htm")         Dim objFile As New FileStream(strFileName, _             FileMode.Create, FileAccess.Write, _             FileShare.ReadWrite)         Dim objWriter As New StreamWriter(objFile)         'Write HTML         objWriter.Write(HTML_EditorVB1.Text)         'Close File         objWriter.Close()         objFile.Close()     End Sub End Class

One thing to note about the HTML that is stored is that it is not a complete HTML file, but an HTML fragment. This is because what is being stored is the portion of the HTML that is inside a <div> tag. If necessary, you can add the extra markup to make a stand-alone HTML file when it is stored.

Finally, permissions need to be given to the user account used by ASP.NET to be able to write to the file in which the data is being stored. This account name is ASPNET by default.