integrating tinymce with asp .net MVC 4.0

Question

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?

Solution 1

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.

Solution 2

first of all this is two same jquery files (but min - minificated 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 _Layout bottom and add:

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

third: on Views/Shared/EditorTemplates/tinymce_jquery_full.cshtml remove

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

Let me please know if this helps you.

Yaroslav

Solution 3

When combining the url and the script paths

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

This suggests that the jquery.tinymce.js should be located in /Home/About/Scripts/tinymce/jquery.tinymce.js. This I assume is incorrect. Try to change 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>

Solution 4

In MVC3 all goes fine.. but in MVC4 it doesn't. (for me at least..)

Finally i got it working.

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

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

to the top (inside the head tags), before the lines:

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

and leave the:

<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 like in MVC3 :) Hope I could help.

View more solutions

Comments

[Yaroslav Bigus]

also on mvc4 you can remove @Url.Content and just use <script src="~/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>

[Admin]

Thanks for your reply. The error message is not showing now. great. But the tinymce is not showing where should be.

[Yaroslav Bigus]

try to move jquery.tinimce.js from _Layout to top of tinymce_jquery_full.cshtml. also add link to jquery, shoud work: <script src="ajax.googleapis.com/ajax/libs/jquery/1.7.2/…> <script src="~/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>

[Henrik Andersson]

Could you perhaps elaborate on this answer?

[Ehsan Akbar]

thank you it works for me ,but i need the editor with more option how can i change it ?