将tinymce与asp .net MVC 4.0集成

Question

使用ASP .NET MVC 4.0,VS2012.

在我的一个页面中,我尝试集成一个WYSIWYG编辑器" TinyMCE ".为了集成,我遵循以下URL:.tugberkugurlu.com

我的视图页面如下:

@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>
}

我的模型就像这样:

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; }

}

我的页面加载了所有功能.

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

也很好.但没有"WYSIWYG"窗格(我不知道它的名称,窗格用于编辑我在textarea(HTml.editorFor())中编写的文本).在运行时中,在jquery.tinymce.js文件中抛出异常.

错误信息 :

`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`

并给我两个选择,继续或休息.如果我继续,页面将加载我之前提到的功能.如果我休息,那么它将保留在带有黄色文本背景的jquery.tinymce.js文件中.

我没有使用Javascript/jquery的经验.在ASP .NET MVC 4.0中是新的,实际上这是我在.net中首次尝试Web应用程序.

我从nuGet更新了jquery.可能的解决方法是什么？

Answer 1

此页面需要更新.Tinymce现在非常容易融入任何东西,MVC4也不例外.

您将由Tinymce提供的地址和一行脚本放在_layout文档的头部,以表明您希望它改变文本框:

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

所有你需要做的就是确保你在表单上呈现一个文本框,它将显示Tinymce.

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

但是,如果tinymce.cachefly.net上的网站关闭,那么它确实意味着没有人能够使用tinymce接口.

Answer 2

组合 url 和脚本路径时

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

这表明 jquery.tinymce.js 应位于 /Home/About/Scripts/tinymce/jquery.tinymce.js 中。我认为这是不正确的。尝试将脚本路径更改为

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