Sometimes we need users to be able to enter fomated input / text.

There are many embedable WYSIWYG HTML inpt boxes available. [ See HERE ]

I chose HTMLBox 4.01 becuase it is easy to style [ DEMO HERE ] but there are many good ones and you should pick the one that best meets your needs.

My implementation looks like this.

When I’ve entered some formatted text I can switch to HTML view and see the markup.

One of the things tat I especially like about HTMLBox is that it exposes events for the appropriate icons like “File Open”

My page markup looks like this:


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master' 
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
         Inherits='_Default'  %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <script src='Scripts/jquery-1.4.1.js' type='text/javascript'></script>
    <script src='Scripts/com.remiya.jquery.codify.min.js' 
	        type='text/javascript'>
    </script>
    <script src='Scripts/htmlbox.colors.js' type='text/javascript'></script>
    <script src='Scripts/htmlbox.styles.js' type='text/javascript'></script>
    <script src='Scripts/htmlbox.syntax.js' type='text/javascript'></script>
    <script src='Scripts/htmlbox.undoredomanager.js' type='text/javascript'>
    </script>
    <script src='Scripts/htmlbox.full.js' type='text/javascript'></script>
    <script type='text/javascript'>
        $(function () {
           
        });
    </script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit 
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
<h2>HTML Input</h2>

<asp:TextBox ID='htmlbox' runat='server' TextMode='MultiLine' Rows='20' 
             Columns='80' ClientIDMode='Static'></asp:TextBox><br />    
<asp:Button ID='SubmitButton' runat='server' Text='Submit' 
            onclick='SubmitButton_Click' /><br /><br />

<asp:Label ID='LabelResult' runat='server'></asp:Label>

<script  type='text/javascript'>
var hb_icon_set_blue;
hb_icon_set_blue = $('#htmlbox').css('height', '100')
                                .css('width', '600').htmlbox({
   toolbars: [
	         ['cut', 'copy', 'paste', 'separator_dots', 'bold', 'italic',
              'underline', 'strike', 'sub', 'sup', 'separator_dots', 'undo',
              'redo', 'separator_dots', 'left', 'center', 'right', 'justify',
              'separator_dots', 'ol', 'ul', 'indent', 'outdent', 
              'separator_dots', 'link', 'unlink', 'image'],
		      ['code', 'removeformat', 'striptags', 'separator_dots', 
			   'quote','paragraph', 'hr', 'separator_dots',
              { icon: 'new.gif', tooltip: 'New', command: function () 
                                { hb_icon_set_blue.set_text('<p></p>'); } },
			 { icon: 'open.gif', tooltip: 'Open', command: function () 
                                { alert('Open') } },
			 { icon: 'save.gif', tooltip: 'Save', command: function () 
                                { alert('Save') } }
		  ]
	],
        icons: 'default',
        skin: 'blue'
    });
</script>

</asp:Content>

But, just adding the jQUery and HTML Box libraries to our page and wiring the jQuery plugin to an ASP.NET Multi Line Textbox will not get us to where we really need to be.

If we do just that muich and run our page we will see this error.



The above is generated by a built in security feature of .NET that prevents the user from submitting markup or anything that might be a security concern.

We’ll need to tell ASP.NET to allow markup to be posted back

WARNING: Doing this means we are explicitly telling ASP.NET that we will be responsable for making sure that whatthe user posts back to the server is SAFE ! – All user input should be considered evil untill we prove otherwise.

In order to permit the markup to be posted back we need to do two things,

1.) We need to add a directive to the system.web section of the web.config file and set the Validation Mode to 2.0


  <system.web>
      <httpRuntime requestValidationMode='2.0' />
  </system.web>

2.) Then, in the page itself we need to add a page directive to tell ASP.NET not to validate the page


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master' 
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
         Inherits='_Default' ValidateRequest='false' %>

Now the page will submit.

Since we turned validation off, we should insure security before we use whatever the user entered in the WYSIWYG box. (Like storing it in a database or displaying it on a page.

In our button click event handler we simply encode the text box value before we use it.


    protected void SubmitButton_Click(object sender, EventArgs e)
    {
        LabelResult.Text = Server.HtmlEncode(htmlbox.Text);
    }

You can download a working ASP.NET 4 sample [ HERE ]