Does this also install EditorTemplates that use a smaller subset of controls?

And if not, how easy is it to modify tinymce_jquery_full to use only a custom subset of controls?

Yeah... to make good use of this, I would need to create smaller, customized Editor Templates. I often find that for a lot of client projects, offering every MCE control just confuses people.

"Trop de choix tue le choix" (Too much choice kills the choice)

You totally rock - thanks for doing all of the heavy lifting to get this setup!

This is terrible from an HTML injection standpoint. No protection at all.

This is awesome! 

But it doesn't work :-(((  The reason is because there are a number of references in both the MVC and JQuery packages to "tinymce.3.4.5" which doesn't exist.

But, it's easy to fix :-))) - just find  "tinymce.3.4.5" and replace with  "tinymce".

Also, the editor templates in the samples (tinymce_full.cshtml and tinymce_full_compressed.cshtml) have a line for: 

 content_css : "@Url.Content("~/Scripts/tinymce/css/content.css")",

It should read:

 content_css : "@Url.Content("~/Scripts/tinymce/themes/advanced/skins/default/content.css")"

Hi there!

First of, great example of integrating TinyMCE into a MVC project. However, i struggled into a problem when integrating it into one of my projects (using nested models).

Instead of using "Viewdata.TemplateInfo.GetFullHtmlFieldName(string.Empty)" you should use "Viewdata.TemplateInfo.GetFullHtmlFieldId(string.Empty)" in order to select the textarea.

Greetz,

prunked

Ran into the same issue prunked ran into when I dropped this into a project today.

Also noticed that the script references within tinymce_jquery_full.cshtml needed to be updated; the tinymce scripts were added to the project without a version number in the path.

@prunked

Thanks for finding that one.. it helped me get the editor to bind.  I appreciate you coming back to help others with what you found.

Also thanks to @Tugberk for putting this together.

object is not supported _TMS

Realy easy to set up with Nuget! but how to set the plugins using Ajax: in my site i'm getting the content using Ajax call, but the plugin is not workink for my Partial View. however it's working when loading content without ajax.

thanks a lot

hi how to modify Stored Text ???

Thanks @Tugberk for this package! Exactly what I am looking for! Thanks!

Tugberk,

First of all thanks a lot for sharing this code, it works like a charm.

I have two questions, in order to save the text to a database, how should I declare the coumn in my db?

Also, do you know how to set up the image upload function?

Tx,

Borrie

Brilliant,

I have been putting this off for a while as I had it all set up for Webforms and thought I will have to go through the whole learning experience again for MVC, but this soooo simple. Coming from someone who has set up a RTE in Classic ASP…lol.

I found you via SO and wanted to +1 you there but I only had 12 points and someone voted me down for asking a silly question so I can’t, but +1 from my heart anyway!

Cheers,

Mike.

@Tugberk,

nvarchar(MAX)

Cheers,

Mike.

Thanks for the great Post,

after I click the Create button I get this error

The current request for action 'Create' on controller type 'MailController' is ambiguous between the following action methods:
System.Web.Mvc.ActionResult Create_post(Rimonim.Models.MailDetail) on type Rimonim.Controllers.MailController
System.Web.Mvc.ActionResult Create(System.Web.Mvc.FormCollection) on type Rimonim.Controllers.MailController

Any help???

btw, Can you post the entire project as an example???

Done that. thats why I'm surprised with this error

My mistake. I had another create function made by vs2010. Didn't know it's there.

Great Post. Thank you very much for sharing

Hi.

Is there a way I can use this on the same property in different places with different themes, e.g.. property: commentbox

[UIHint("tinymce_jquery_full"), AllowHtml]
public object PageContent { get; set; }

And elsewhere:

[UIHint("tinymce_jquery_simple"), AllowHtml]

public object PageContent { get; set; }

Cheers,

Mike.

Has anyone been able to get this to work in a jQuery, Colorbox or Dialog, I am so close, everything works but I can’t type into the box! I can type into the ‘HTML’ editor, upload an image, but I cannot type into the TestArea!

So close yet so far!

I think it's because TinyMCE needs to load after Colorbox or something???

Cheers,

Mike.

Hi 

am getting error when checked in developer tool

Object#<Object> has no method tinymce

sorry jquery was referred at the bottom.now it works.

Great work, thank you!

This is wonderful! I really appreciate the work you did here. Ive been searching all over for this exact control. Amazing setup!

@Html.TextArea(String.Empty, /* Name suffix */

    ViewData.TemplateInfo.FormattedModelValue /* Initial value */

)

System.ArgumentException 

  HResult=-2147024809

  Message=Value cannot be null or empty.

Parameter name: name

  Source=System.Web.Mvc

  ParamName=name

  StackTrace:

       at System.Web.Mvc.Html.TextAreaExtensions.TextAreaHelper(HtmlHelper htmlHelper, ModelMetadata modelMetadata, String name, IDictionary`2 rowsAndColumns, IDictionary`2 htmlAttributes, String innerHtmlPrefix)

       at System.Web.Mvc.Html.TextAreaExtensions.TextArea(HtmlHelper htmlHelper, String name, String value, IDictionary`2 htmlAttributes)

       at System.Web.Mvc.Html.TextAreaExtensions.TextArea(HtmlHelper htmlHelper, String name, Object htmlAttributes)

       at ASP._Page_Views_Shared_EditorTemplates_tinymce_jquery_full_cshtml.Execute() in c:\Users\egr\Google Drive\robot\site\newrobot\newrobot\Views\Shared\EditorTemplates\tinymce_jquery_full.cshtml:line 53

       at System.Web.WebPages.WebPageBase.ExecutePageHierarchy()

       at System.Web.Mvc.WebViewPage.ExecutePageHierarchy()

       at System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage)

       at System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance)

       at System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer)

       at System.Web.Mvc.HtmlHelper.RenderPartialInternal(String partialViewName, ViewDataDictionary viewData, Object model, TextWriter writer, ViewEngineCollection viewEngineCollection)

       at System.Web.Mvc.Html.PartialExtensions.Partial(HtmlHelper htmlHelper, String partialViewName, Object model, ViewDataDictionary viewData)

       at System.Web.Mvc.Html.PartialExtensions.Partial(HtmlHelper htmlHelper, String partialViewName)

       at ASP._Page_Views_Admin_CreatePageForm_cshtml.Execute() in c:\Users\egr\Google Drive\robot\site\newrobot\newrobot\Views\Admin\CreatePageForm.cshtml:line 10

       at System.Web.WebPages.WebPageBase.ExecutePageHierarchy()

       at System.Web.Mvc.WebViewPage.ExecutePageHierarchy()

       at System.Web.WebPages.StartPage.RunPage()

       at System.Web.WebPages.StartPage.ExecutePageHierarchy()

       at System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage)

       at System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance)

       at System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer)

       at System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context)

       at System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult)

       at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<InvokeActionResultWithFilters>b__17()

       at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation)

  InnerException: 

Everybody HELP,

On local it is work, but I deloy on host it's not work.

It no show any error message. but it not getting tinymce_jquery_full.cshtml file in EditorTemplates.

Server use IIS6 , OS 2003.

Thank all,

Awesome post man ! Now even I am using tiny mce editor on my blog http://www.yassershaikh.com which is made using MVC 3 :)

Thank you for this great package.

I was able to run this in a fresh MVC Application. However, if I integrate it in an already established application it does not work. Although it can change the "text box" into "textarea", it does not show the WYSIWYG.

My web application's _Layout has some jquery plugins installed. Could that be conflicting with this package?

Please help me here. Thank you.

Thanks for the good work; I will follow your approach.

Q. is the image upload used in this blog free or purchased.  I am searching for free open-source image upload plugin to be used within TinyMCE that I can use in my MVC project to upload images from local drive.

when I do

 <div class="editor-label">

        @Html.LabelFor(model => model.Section.Description)

    </div>

    <div class="editor-field">

        @Html.EditorFor(model => model.Section.Description)

        @Html.ValidationMessageFor(model => model.Section.Description)

    </div>

in html it looks like 

and generated js is 

$('#Section.Description').tinymce({

but must be #Section_Description

Could you give me some idea about changing the mode? I can change the editor to readonly by clicking a button to call tinyMCE.get('editorID').getBody().setAttribute('contenteditable', 'false'); 

and change it back by clicking another button to call

tinyMCE.get('editorID').getBody().setAttribute('contenteditable', 'false');

But how to initialize the editor to readonly?

Thanks in advance.

I hv test it work, thanks

But seems there are some issue when i tried to use 2 or more WSIWYG editor in a page

public class MyDTO 

    {

        [UIHint("tinymce_full_compressed"), AllowHtml]

        public string Requirement { get; set; }

        [UIHint("tinymce_full_compressed"), AllowHtml]

        public string Description { get; set; }

Hi there!

@Evgeni: This is because the editor template is using "GetFullHtmlFieldName(string.Empty)" instead of "GetFullHtmlFieldId(string.Empty)". Just change it in the editor template, and it will work ;)

@tugberk: Still not fixed? ;)

@dynlist: Unfortunately, "readonly: true" (see http://www.tinymce.com/wiki.php/Configuration:readonly) hides all ui elements of tinymce. If you just want to set the "contenteditable: false" on init, add the following to your template:

oninit: function () { tinyMCE.get('@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)').getBody().setAttribute('contenteditable', 'false'); }

This should do the trick...

@Jacob Handaya: Couldn't reproduce this issue, tried it with your dto and a child dto also containing a tinymce editor, resulting in showing up 3 editors. Make sure you didn't define the editor for one property twice, this would, for example, cause this problem. Otherwise, some more code would be good (the view etc... A small demo application would be great ;) ).

Greate Work!

running in ASP.NET MVC4 , no matter where the tinymce script is registered (int the _Layout file, btw) ,i'm getting a javascript error:
Uncaught TypeError: Object [object Object] has no method 'tinymce'  

the script get the field name properly, but is unable to execute thr tinymce commands.

any help will be greatly appriciated !

Excellent! Thank you very much for the Nuget Package! It makes adding TinyMCE to MVC Projects much easier! 

Pete

TinyMCE editor didn't appear for asp.net MVC 4.  I believe this could be because of correct js reference is not getting appended.  I can able to see that it comes with textarea editor but it is not coming up with fancy tinyMCE buttons and all.  Appreciate your input.

Thanks.

Sorry i just figure it out that i didn't uncomment jquery reference comment with correct version.  Thank you again and you did a great job, it was very helpful.

Two Instance on same page?

This Works

public class TinyMCEModel {
[AllowHtml]
[UIHint("tinymce_full_compressed")]
public string Content { get; set; }

public string Content2 { get; set;}
}

This Doesn't
public class TinyMCEModel {
[AllowHtml]
[UIHint("tinymce_full_compressed")]
public string Content { get; set; }
[AllowHtml]
[UIHint("tinymce_full_compressed")]
public string Content2 { get; set; }
}

Any Advice??

Happy to email project if you like

@Pat Tormey:

Two TinyMCE instances on the same page should not be a problem. 

What happens if you have both instances on the page? Is only the first one showing up? Or is no TineMCE displayed at all?

What browser do you use? Did you check the browser console (in Internet Explorer > 6 or Chrome, press F12 to display the developer tools, and switch to (JavaScript) console; in Firefox i guess you need to install FireBug first, after that, F12 and switch to console)? 

You can also send a small example demonstrating the problem to falcon4u[at]gmx[dot]net, i'll have a look at it then.

Wish you all a happy new year ;)

Greetz,

prunked

>Two TinyMCE instances on the same page should not be a problem
I completly agree ;)

In IE it throws an error
JavaScrip runtime Object doesn't support the action

ref to tinymce line 1 col 139969 unhandled exception

Same error in chrome but doesn't break on it.. Prolly my cofig

If allowed to continue only the second instance is tinyMce first is just textarea

@Pat Tormey:

I was able to replicate your problem (and possibly it's the same problem @Jacob Handaya had). There seems to be some issues when loading the tiny_mce.js more than once (at least using the TinyMCE.MVC package).

To fix it, you can remove the following line

<script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>

from the editor template and place it in your head section of your layout-file / masterpage.

Or, if possible, switch to the TinyMCE.MVC.JQuery package (didn't have any problems with it except the one using nested models i already commented ;) ).

THANKS!.. Sounds like that should work.. I really appreciate the speedy resppnse..

Hi,

I have downloaded the TinyMCE.MVC.Jquery and TinyMCE.MVC.Jquery.Sample into a new MVC.NET 4 project, however I cannot seem to get it to show in the sample TinyMCESampleJQuery cshtml page.

I only changed the content_css: "@Url.Content("~/Content/Site.css")", to point to my stylesheet and added the jquery and tinymce references

<script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

@mcver:

Could you try the following?

• Remove the script reference to jQuery from the editor template.
• Open your _Layout.cshtml. You should find a line like '@Scripts.Render("~/bundles/jquery")'. Move this line into your head section of your layout file.

The content_css option is not necessarily needed, it's for styling the content area of the TinyMCE instance. IMHO i would remove it.

That should do the trick.

Greetz,

prunked

@prunked

Excellent thanks moving the scripts bundle of jquery did the trick!

Thanks a lot!

2nd Rendering Of Partial View does not work.

I have my EditorFor loading correctly the first time it is loaded on a page in a Partial. I have a list with editable items that i edit in a partial.

When i use ajax to reload that partial, the tinyMCE is properly loaded, but the xxx_parent div is set to display:none. Any idea what is causing this?

ie: span role="application" aria-labelledby="ObjectiveText_voice" id="ObjectiveText_parent" class="mceEditor defaultSkin" style="display: none;"><span class="mceVoiceLabel" style="display:none;"

if i put in an alert before the .tinyMCE call in the EditorTemplate i can see it visible, but as soon as it finishes rendering the partial it is somehow set to display:none

This only happens if the previous instance is not removed. If i do xxx.tinyMCE().remove() in the console window and then click the edit button it works.

@Niall:

Sounds weird... Could you send me a small VS2010/2012 example solution demonstrating the problem (falcon4u[at]gmx[dot]net)? I'd like to have a look at this one ;)

Still need some help

VS 2012, MVC latest. clean new project

Copy exactly as shown above

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'tinymce'

I'm guessing there is something odd about the loading order but since it crashes I can't see it..

Any help?

@Pat Tormey:

It seems that "jquery.tinymce.js" is not loaded correctly. Could you please check the script path in your editor template? 

Just to avoid confusion that came to my mind after reading my comments: 

>> Remove the script reference to jQuery from the editor template.

was not meant to be read as "remove the jquery.tinymce.js reference" ;)

If that was not the case, a small sample would be great to dig into this...

BTW: Which version of IE did you use?

Unable to view the editor control what might be the issue

@Dorababu:

Depends on what package and what MVC version you are using. Check the following:

- The script reference in the editor template is correct.

- Your property is annotated with the UIHint attribute and the editor template you want to use.

- In your view, you use the Html.EditorFor helper (neither Html.TextAreaFor nor Html.TextBoxFor will render the editor template).

- When using the tinymce.mvc.jquery-package with MVC4, make sure that you moved "@Scripts.Render("~/bundles/jquery")" into the head section.

- Check your browser for script errors. They often will give you a hint of what's going wrong...

greetz,

prunked

How can i make the editor resizeable plz..Thanks for the realy nice tutorial.

@Avinash:

When using the advanced theme, you can set 'theme_advanced_resizing' to true to make your editor resizable...

See this jsfiddle (link to documentation: here)

greetz,

prunked

I have added tinyMCE in MVC3 project added the required files but I am not able to get the updated value of textarea as i am updating in the editor texarea..

Could you please help me out i am sure i am missing something and what is that i am not getting.Please help me.

Good Stufff thanks,

'I try install TinyMCE.MVC.JQuery on my MVC4 , JQuery_1.9.1.min.js  It give me a error

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

I guess it's not support JQuery _1.9.1.min.js

or what is  the reason?

thanks

First off, sry for the late response, have been more then busy these days...

@raj:

As far as i remember, the content of the underlying textarea is updated on the form->onsubmit event. If you'd like to keep the content of the TinyMCE instance sync with your textarea, maybe you could use some sort of onChange event listener (see http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onChange). Could be something like this: 

setup: function(ed) {

ed.onChange.add(function (ed) {

ed.getElement().innerHTML = ed.getContent();

});

}

Although i would recommend to just keep the original behavior and let TinyMCE keep your textarea synced...

@Frank:

Sounds like you're having the same problem as Pat Tormey. Make sure you removed the jquery script reference from your editor template, and load jquery before the TinyMCE instantiation (e.g. moving the jquery bundle to your head section).

greetz,

prunked

Hi I keep getting a javascript error.

media_external_list_url : "lists/media_list.js"

I instead of using the tinymce_jquery_full.cshtml EditortTemplate, I switched it to use "tinymce_full.cshtml" EditorTemplate and then it works. 

---------------------------------------------

Hi I keep getting a javascript error.

media_external_list_url : "lists/media_list.js"