ASP Snippets

Categories






Alerts

Free Alerts

Your email will always be
private and will not be shared.




Follow us on twitter.




Zoom In | Zoom Out


Author is awarded Most Valuable Professional award by Microsoft ASP/ASP.Net

Using Tiny MCE Rich TextBox in ASP.Net

Author:Mudassar Khan

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.


Adding Tiny MCE to ASP.Net Website


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


Tiny MCE Rich Text Editor in ASP.Net


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

 

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)

 

Posted: Jul 26 2009, 16:04 by Mudassar Khan | Comments (16) RSS comment feed |
Filed under: ASP.Net | C# | JavaScript | VB.Net

Views: 5993
Page copy protected against web site content infringement by Copyscape


If you like this article, help us grow by bookmarking this page on any social bookmarking site.
Bookmark and Share





Comments

Add comment


 

biuquote
  • Comment
  • Preview
Loading




0  +  0  =   










Community News





Web Hosting SpotLight


Consulting


For consulting and work related queries click here.



Advertise


Advertise with us. For more details click here.


Suggestions


Please provide your valuable suggesstions here.

This Site is hosted on

Lunarpages.com Web Hosting