integrating tinymce with asp .net MVC 4.0

using ASP .NET MVC 4.0 , VS2012.

In one of my page, I tried to integrate a WYSIWYG editor "TinyMCE". To integrate, I followed the following URL : .tugberkugurlu.com

My view page is like :

@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 like :

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 about page loads with all features.

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

also loads fine. but no "WYSIWYG" pane(i donno what it is called, the pane is used to edit my text written in the textarea(HTml.editorFor())) is loaded. In the runtime, Exception is thrown in 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 features as i mentioned earlier. If i Break, then it stays in the jquery.tinymce.js file with a yellow text-background.

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

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

This page requires an update. Tinymce is now very easy to incorporate into pretty much anything and MVC4 is no different.

You place into the head of the _layout document the address provided by Tinymce and the one line of script to indicate that you wish for it to alter the text box:

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

All you have to do then is make sure that you render a textbox on the form and it will display Tinymce instead.

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

If the site at tinymce.cachefly.net is down, however, then it does mean that no one would be able to use the tinymce interface though.