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.
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">
tinyMCE.init({
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"
});
</script>
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">
<div>
<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>
</div>
</form>
As you can refer above I have placed an asp.net 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
C#
protected void btnSave_Click(object sender, EventArgs e)
{
lblDisplay.Visible = true;
RichTextBox.Visible = false;
lblDisplay.Text = RichTextBox.Text;
}
VB.Net
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.