integrating tinymce with asp .net MVC 4.0

Posted by user1865670 on Stack Overflow See other posts from Stack Overflow or by user1865670
Published on 2013-01-13T09:11:17Z Indexed on 2013/11/13 3:54 UTC
Read the original article Hit count: 643

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery