• Using TinyMCE Editor with ASP.NET MVC

    by Venkata Koppaka | Aug 30, 2010

    In this post I will walk through on how to get TinyMCE editor, one of the best WYSIWYG (What YouSee Is What You Get) editors, to work in a ASP.NET MVC application

    Go to TinyMce website and download the latest Main Package, at the time of writing it is version 3.3.8. Here is a link for direct download  - Click to Download

    I will use a ASP.NET MVC2 App to demonstrate TinyMCE.

    Create a New ASP.NET MVC2 Web Application. Unzip the contents of JScripts folder in TinyMCE zip folder that you downloaded earlier to say /Scripts/Tiny_Mce/

    After you unzip the contents of JScripts folder to your application, your Scripts folder should look something similar to this -

    Include a Script reference of TinyMCE javascript file in your view where you want to use the TinyMCE Editor -

    1 <script src="/Scripts/tiny_mce/tiny_mce.js" type="text/javascript"></script> 

    Then copy the following javascript in to your view to initialize TinyMCE -

    1 <script type="text/javascript"> 
    2         tinyMCE.init({ 
    3             // General options 
    4             mode: "textareas", 
    5             theme: "advanced", 
    6             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", 
    7  
    8             // Theme options 
    9             theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 
    10             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", 
    11             theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
    12             theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", 
    13             theme_advanced_toolbar_location: "top", 
    14             theme_advanced_toolbar_align: "left", 
    15             theme_advanced_statusbar_location: "bottom", 
    16             theme_advanced_resizing: true, 
    17  
    18             // Example content CSS (should be your site CSS) 
    19             content_css: "css/example.css", 
    20  
    21             // Drop lists for link/image/media/template dialogs 
    22             template_external_list_url: "js/template_list.js", 
    23             external_link_list_url: "js/link_list.js", 
    24             external_image_list_url: "js/image_list.js", 
    25             media_external_list_url: "js/media_list.js" 
    26  
    27             
    28         }); 
    29     </script> 
    30  
    31  

    You would need a TextArea HTML Control to view TinyMCE editor. Use the following code to add a TextArea to your view.

    1  
    2     <form> 
    3         <textarea name="tinyMCEContent" style="width: 100%"> 
    4         </textarea> 
    5     </form> 

    Run the application, and you should see the TinyMCE Editor like this -

    Hope this helps,

    Cheers,

    Venkata

    Go comment!