Tinymce integration with asp.net MVC 4.0

Question

using ASP.NET MVC 4.0 , VS2012 .

On one of my pages, I tried to integrate the WYSIWYG TinyMCE editor. To integrate, I executed the following URL: .tugberkugurlu.com

My browse page is similar:

@model AboutModels @using FileUploadDemo.Models <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script> @{ ViewBag.Title = "About"; } @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>About</legend> <div class="editor-label"> @Html.LabelFor(model => model.Title) </div> <div class="editor-field"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) </div> <div class="editor-label"> @Html.LabelFor(model => model.PostedOn) </div> <div class="editor-field"> @Html.EditorFor(model => model.PostedOn) @Html.ValidationMessageFor(model => model.PostedOn) </div> <div class="editor-label"> @Html.LabelFor(model => model.Tags) </div> <div class="editor-field"> @Html.EditorFor(model => model.Tags) @Html.ValidationMessageFor(model => model.Tags) </div> <div class="editor-label"> @Html.LabelFor(model => model.Content) </div> <div class="editor-field"> @Html.EditorFor(model => model.Content) @Html.ValidationMessageFor(model => model.Content) </div> <p> <input type="submit" value="Create" /> </p> <p> Posted Content : @ViewBag.HtmlContent </p> </fieldset> } 

Here my Model is similar:

 public class AboutModels { public string Title { get; set; } public DateTime PostedOn { get; set; } public string Tags { get; set; } [UIHint("tinymce_jquery_full"), AllowHtml] public string Content { get; set; } } 

My page loads with all the features.

 "@html.EditorFor(model=>model.content)" 

also loads normally. but not the WYSIWYG panel (I don’t know what it is called, the panel is used to edit my text written in a text field (HTml.editorFor ())). At run time, an Exception is thrown in the jquery.tinymce.js file.

Error message:

 `Unhandled exception at line 86, column 11 in http://localhost:1706/Home/About 0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method` 

And give me two options: Continue or Break . If I continue, the page loads with functions, as I mentioned earlier. If I Break, then it remains in the jquery.tinymce.js file with a yellow text background.

I have no experience with Javascript / jquery. And new to ASP.NET MVC 4.0, this is actually my first attempt at a web application in .net.

I updated jquery from nuGet. What could be the possible ways to solve it?

Answer 1

This page requires updating. Tinymce is now very easy to include in almost anything, and MVC4 is no different.

You put the address provided by Tinymce and one line of script in the _layout document header to indicate that you want to change the text box:

 @Scripts.Render("//tinymce.cachefly.net/4.0/tinymce.min.js") <script> tinymce.init({ selector: 'textarea' }); </script> 

All you have to do is make sure you render the text box on the form and display Tinymce instead.

 [AllowHtml] [DataType(DataType.MultilineText)] public string YourInputText { get; set; } 

If the site on tinymce.cachefly.net does not work, it means that no one can use the tinymce interface.

Answer 2

first of all this are two identical jquery files (but the minimum version):

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

second : just go to the bottom _Layout layer and add:

  @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) <script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script> 

third : by views / Shared / EditorTemplates / tinymce _jquery_full.cshtml remove

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

Please let me know if this helps you.

Yaroslav

Answer 3

When combining URLs and script paths

 http://localhost:1706/Home/About <script src="Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script> 

This suggests that jquery.tinymce.js should be located in /Home/About/Scripts/tinymce/jquery.tinymce.js. I assume this is not true. Try changing the script path to

 <script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script> //or <script src="~/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script> 

Answer 4

In MVC3, everything is going fine .. but in MVC4 it is not. (for me at least ..)

Finally, I started to work.

In _Layout.cshtml, I had to move the bottom lines:

  @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) 

at the top (inside the header tags), before the lines:

  @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") 

and leave:

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

in the EditorTemplate tinymce_jquery_full.cshtml file.

Now it works fine, as in MVC3 :) I hope I can help.

Answer 5

You can add data annotation to the model itself to tell it to use tinymce. The following is an example of a full text editor.

 [Display(Name = "Condition"), UIHint("tinymce_jquery_full"), AllowHtml] public string ExampleCondition { get; set; } 

Keep in mind that this makes this model display a rich text editor for new or editing operations. so for these views you will need the appropriate script links.

To use System.ComponentModel.DataAnnotations, you will also need the correct usage instruction in your model.

Answer 6

you need to use "@ html.Raw (model => model.content)"