• Download TinyMCE (Developers Version ) from their website.
• Create a new asp.net website

An illustration of the adding new website

• copy the tinymce folder located above in the working directory of this website and refresh the folder by right-clicking the project in the solution explorer.

• now we reference the tinymce javascript eidtor which renders a textarea and changes it into a WYSIWYG Edit/RichTextBox by adding the following script in head tag

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : "css/content.css",

// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",

// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>

• the above script actually renders any textarea into a richtextbox which appears in body, so now adding a textarea with an ID and runat=”server” tag so that we can access it on the server side on a  button click event.

<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" runat="server">
</textarea>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

• Also add the following code in the button click event

protected void Button1_Click(object sender, EventArgs e)
{
String HTMLText = elm1.Value;
int a = 0;
}

• we are pretty much done, but there is a little problem here. this textarea is now supposed to send HTML through the request object and when the request is parsed by the framework it marks it has malicious and the request will eventually fail, so in order to make the parser ignore this content we have to put ValidateRequest=”false” attribute in the page directive tag. Now we are good to go, run the website.

An illustration of Rich Text Box ( WYSIWYG )

• now add a break point on the first line of the button click event to see what is posted back to the server from this textarea

An illustration of HTML posted back by the Rich Text Box

• Quite simple, isn’t it
• here is the code for this sample, Download
• Enjoy !