ASP.NET Hosting Tips :: How to Use Tiny MCE Rich Text Editor in ASP.Net

In this article I’ll be explaining how to add Tiny MCE Rich Text Editor in ASP.Net Web application.

Download TinyMCE Editor

To start with you need to download the Tiny MCE Editor from the Tiny MCE website using the link below.

Download Tiny MCE Editor

Adding TinyMCE to the ASP.Net Website

Once you downloaded the TinyMCE Editor place the folder inside the root folder of your website as shown below.

Once the TinyMCE folder is placed in the website root folder, you’ll need to add the reference of the script on the page you want to place the RichTextEditor or RichTextBox.

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,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,imagemanager,filemanager",
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,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js"

Adding the TextArea to the ASP.Net Web Page

To create a Tiny MCE Editor we need to place a TextArea on the form.

<form id="form1" runat="server">
<asp:TextBox ID="RichTextBox" runat="server" TextMode = "MultiLine" ></asp:TextBox>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
<asp:Label ID="lblDisplay" runat="server" Text="" Visible = "false" ></asp:Label>

As you can refer above I have placed an TextBox along with two buttons and a Label. Later on button click I will display the content of the TinyMCE Rich TextBox in a Label control. That’s it now your page is ready to display Rich TextBox. Refer the figure below

Displaying the RichTextBox Content

Now on the click of the save button that we added before I’ll display the contents of the Rich TextBox in an ASP.Net Label Control


protected void btnSave_Click(object sender, EventArgs e)
lblDisplay.Visible = true;
RichTextBox.Visible = false;
lblDisplay.Text = RichTextBox.Text;


Protected Sub btnCancel_Click(ByVal sender As Object, ByVal e As EventArgs)
lblDisplay.Visible = False
RichTextBox.Visible = True
lblDisplay.Text = ""
RichTextBox.Text = ""
End Sub

That’s it.

Leave a Reply

Your email address will not be published.