ASP Snippets | Using Tiny MCE Rich TextBox 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.

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.

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_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.

<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

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

The figure below displays the content of the Tiny MCE RichTextBox in an ASP.Net Label Control

Contents of Tiny MCE Rich Text Box control being displayed in ASP.Net Label Control

The above code has been tested in the following browsers

Internet Explorer FireFox Chrome Safari Opera

* All browser logos displayed above are property of their respective owners.

That’s it. You can download the sample source using the link below. Hope you liked this article.

TinyMCE_ASP.Net.zip (620.17 kb)