CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » ASP.Net Article » Using TinyMCE Editor in ASP.Net   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
Using TinyMCE Editor in ASP.Net

By Satheesh Babu
Posted On Feb 25,2009
Article Rating: (Login)
Average Rating: 3.67
No of Ratings: 3
No of Comments: 20
Print this article.
Category: ASP.Net

Subscribe to our feed!

Using TinyMCE Editor in ASP.Net

 

There is no inbuilt rich text editor control readily available in existing ASP.Net control set. Since, developing a rich text editor ourselves is time consuming and complicated task, we can try using some of the readily available rich text editor in the internet. TinyMCE editor is one such editor that can be integrated and used in ASP.Net projects for providing rich text editing options.

Visit the TinyMCE official site to know more.

 

Moving forward, we will see how this editor can be used in ASP.Net projects.

Steps

1.      From your Start menu, open Visual Studio 2008, Click File >Website and choose ASP.Net Website with the language of your choice and create a new website project.

2.      Download the latest TinyMCE files from here. The current version is 3.3b2.

3.      Unzip the zip file. Copy the TinyMCE folder into your visual studio solution. Refer below,

Using TinyMCE Editor in ASP.Net

4.      Drag an ASP.Net textbox control into your aspx page. Set its TextMode property to MultiLine.

5.      To use the TinyMCE features with the MultiLine textbox, we need to include Tiny_MCE.js file which is under the folder tinymce/jscripts/tiny_mce/ of the package into our webpage.

      Refer below,

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

            Make sure you give the correct path of the above javascript file from your solution.

6.      Next, we need to call the TinyMCE javascript API to make the multiline text box to an editor instance. Refer the code below,

  <head runat="server">

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript" language="javascript">

    tinyMCE.init({

        mode: "textareas"

    });

</script>

    <title></title>

</head>

7.      That’s it! Execute the page and you can see the TinyMCE in action. By default, the TinyMCE editor will include a simple toolbar set with some basic toolset.

Refer below,

Using TinyMCE Editor in ASP.Net

 

The final code will look like,

<head runat="server">

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript" language="javascript">

    tinyMCE.init({

        mode: "textareas"

    });

</script>

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox>   

  

    </div>

  

    </form>

</body>

</html>

 

The default editor instance (Refer the image above) we get will have a theme called “Simple”. Hence, the above is code is equivalent to,

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript" language="javascript">

    tinyMCE.init({

        mode: "textareas",

        theme: "simple"

    });

</script>

 

Note

Please note that the above code will make all the textarea in the page to rich text editor. We will see how to restrict this behaviour in coming sections.

 

Adding Advanced Toolbar Options

To make the TinyMCE editor to have all the advanced styling options, the editor includes one another theme called Advanced which can be applied.

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript" language="javascript">

    tinyMCE.init({

        mode: "textareas",

        theme: "advanced"

    });

</script>

 

When executed, we will have an editor similar to below,

Using TinyMCE Editor in ASP.Net

 

With this knowledge, we will move forward and do more customization on the TinyMCE editor.

 

Customizing TinyMCE editor

The TinyMCE editor includes some HTML examples in root/tinymce/examples/ folder which we can refer to customize the editor. In the TinyMCE package in solution, browse to root/tinymce/examples/full.html. Now, copy the tinyMCE.init() function which includes all the options to our page, Default.aspx.

Refer the code below,

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript" language="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,wordcount",

 

        // 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>

 



ASP.Net Hosting

Recent Articles

Execute the page and see the editor with all the available options in action.

Using TinyMCE Editor in ASP.Net

 

You can now start customizing the editor from the above code easily.

In the above code, you can see the properties that can be set for controlling the toolbar location and alignment, status bar location, resizable option of the editor. Refer below,

        theme_advanced_toolbar_location: "top",

        theme_advanced_toolbar_align: "left",

        theme_advanced_statusbar_location: "bottom",

        theme_advanced_resizing: true,

 

You can start removing the unwanted toolbars styles, plugins to just satisfy your requirements. Use the property theme_advanced_buttonsN to define your toolbar set, where N is line number the toolbar needs to be displayed.

 

For example, to customize a editor to look like below,

Using TinyMCE Editor in ASP.Net

 

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript" language="javascript">

    tinyMCE.init({

        // General options

    mode: "textareas",

    theme: "advanced",

   

    // Theme options

    theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,
|,justifyleft,justifycenter,
justifyright,justifyfull,|,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: "hr,removeformat,visualaid,|,sub,sup",   

 

    theme_advanced_toolbar_location: "top",

    theme_advanced_toolbar_align: "left"

   

    });

</script>

 

Disable TinyMCE editor

The codes discussed in the above sections will convert all the textareas in the page to TinyMCE rich text editor. Often, we will require making only some selected textareas in the page as rich text editor. To do this, TinyMCE editor has a property called editor_deselector which can be initialized with a class name. You can now restrict a textarea by applying the initialized class name with the class property of the textarea.

Refer the below code,

<head runat="server">

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript" language="javascript">

    tinyMCE.init({

        // General options

    mode: "textareas",

    theme: "advanced",

    editor_deselector: "NoEditor",

    // Theme options

    theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|
,justifyleft,justifycenter,justifyright,
justifyfull,|,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: "hr,removeformat,visualaid,|,sub,sup",   

 

    theme_advanced_toolbar_location: "top",

    theme_advanced_toolbar_align: "left"     

    });

</script>

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <B>Rich Text Editor</B>

    <asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox>

    <B>Regular TextArea</B>

    <asp:TextBox ID="TextBox2" TextMode="MultiLine" CssClass="NoEditor" runat="server"></asp:TextBox>

    </div>

 

When executed you can see the output like below,

Using TinyMCE Editor in ASP.Net

 

Fetching the Text from TinyMCE Editor

Since, it is an ASP.Net textbox control it can be accessed by regular Text property in the server. By default, ASP.Net does not allow HTML inputs to be posted to server in order to prevent the cross site scripting attach. You will get the following error,

A potentially dangerous Request.Form value was detected from the client (TextBox1="").

 

You need to set ValidateRequest="false" in the Page directive to prevent this error.

 

Reference

http://wiki.moxiecode.com/index.php/TinyMCE:Index

 

Conclusion

Rich text editor is one of the major components that is required if your website content is text based. Since, building our own Rich Text editor is time consuming and cumbersome task, the readily available open source RTF editor’s like TinyMCE will really make your day. If you are getting a requirement to have RTF editor in your project then you can really give it a try on this one!

Refer the link in reference section for doing more customization.

Happy Coding!!

 

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    Awesome
    I just wanna thank you soo much .. this was the first result from google and man was it all here. I got all I wanted and pretty nicely explained. Thank you and works perfecto in IE
    Language Drop Down
    Hi there everyone ,

    I just wanted to ask that i need to add some regional languages like Bengali, Oriya, Gujarati etc into my web page with the tiny mce so please help me out and if possible please mail me at daman0187singh@yahoo.com

    Thanks and Best Regards

    Daman
    How to upload an image using Tiny MCE in asp.net
    I used the tiny mce and is working properly but I m facing a problem that when I m uploading any image the editor it doesn't displayed on the page.
    can you help me plz??
    ValidateRequest Fails
    To anybody else who has a problem with ValidateRequest="false" not working in ASP.Net 4.0. You have to also set a web.config value:
    <system.web>
    <httpRuntime requestValidationMode="2.0"/>
    </system.web>
    Tiny
    http://www.dinesh-itsolutions.blogspot.com/
    See this link if anybody's having problem........
    "stupidist" --- really?
    Mr. "No" says that ValidateRequest="false" in the page ... "is the stupidist thing to do!"

    Really? Can't think of anything worse? What if you sat down on the toilet and didn't realize that a giant scorpion fell into the pot? Would that not be worse?

    I do think it is a shame to give up any security for a few bells and whistles but I find your complaint a little over the top. Why would you rely solely on built in catch alls for security anyway? This work-around is a failing of ASP.NET and not of a simple javascript based tool... If you want HTML in your database then you simply have to be willing to compromise and not be lazy because it's simple enough to detect HTML yourself in the code page if you are worried about SQL injection or malitious HTML. Enough whining!
    Toolbar button click event
    How can I capture the click event of one of the standard toolbar buttons (I am looking at the bullet list) so I can execute custom code when the user clicks the bullet list button.
    it is working now
    I got it to work now
    still not working
    still not working even after I ad ValidateRequest="false", still show the upper error (A potentially dangerous Request.Form value was detected from the client). please help
    its not working
    its not working...simple multiline text box is dispalyed nothing else
    updatepanel
    RE: updatepanel: it is working but you need to define the linkbutton / button / whater that triggers it's apperance as a trigger:

    <Triggers>
    <asp:PostBackTrigger ControlID="lbSendMessage" />
    </Triggers>

    I guess because its javascript needs a full pageload
    Thanks
    it's very good...Thank you very much.
    Thank You
    Thanks for sharing this info with us. I've been going crazy trying to add .dll file into my visual studio toolbox but I wasn't able to successfully add TinyMCE Editor.

    With your tutorial help, I was. Thanks again. :)
    asp.net file manager for TinyMCE
    Ajax File Manager http://filemanager.3ntar.net is free Ajax file manager for asp.net .
    OnClick Event handler
    How do I code a client-side JS function to handle onChange event on the tinymce editor please? Where would I find a complete example? I need to reflectthe editor text dynamically into a Literal Control on te same aspx page.
    which company made TinyMCE Editor
    hi ,please tell me which company made TinyMCE Editor?
    mhbbgh@gmail.com
    tznx alot
    No
    NOOO!

    You need to set ValidateRequest="false" in the Page directive to prevent this error.

    is the stupidist thing to do!
    Awesome
    Thanks man this is the most descriptive article about integrating tinyMCE with ASP.net pages, and it helped a lot thanks again
    tinyMCE Editor
    Good one...helpful...!!!
    need help
    very nice working 4 me. bt inside update pannel it is not working