I am using TinyMCE Rich text Editor in my MVC app. I am using tinymce.js and tinymce.min.js. The problem that I am facing is that I am not able to show multiple rich text editors in my app. If the user is chose to have one editor, then it is working fine but if more than one selection is made then editor is showing up only for the first one and rest comes up as normal text areas.
Please help.
Snippets of my code:
Bundle containing TinyMCE:
@using System.Web.Optimization
@Scripts.Render("~/bundles/tinymce")
Global.asax:
public static void RegisterBundles(BundleCollection bundles)
{
//Creating bundle for your js files
bundles.Add(new ScriptBundle("~/bundles/tinymce").Include(
"~/Scripts/tinymce/tiny_mce.js"));
}
There is no browser script error. JSScript error comes up saying: "Object doesn't support this property or method" error"
Tiny_Mcefull.cshtml now:
<script type="text/javascript">
(function(){
tinyMCE.init({
// General options
mode: "exact",
elements: "@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
theme: "advanced",
height: "500",
width: "790",
verify_html : false,
plugins : "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,advlist,autosave",
// 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,restoredraft,codehighlighting,netadvimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
// Example content CSS (should be your site CSS)
//content_css : "css/content.css",
content_css : '@Url.Content("~/Scripts/tinymce/css/content.css")',
convert_urls : false,
// 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"
});
})();
</script>
Well, in your Layout:
Can't say right now why, but i remember that it was important to plug TinyMCE after Jquery. TinyMCE Template:
Hope this will work for you