Question

使用 ASP .NET MVC 4.0 ， VS2012 。

在我的一个页面中，我尝试集成一个WYSIWYG编辑器“ TinyMCE ”。为了集成，我遵循了以下网址：.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也不例外。

您可以在_layout文档的头部放置Tinymce提供的地址和一行脚本，以表明您希望它改变文本框：

@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

首先所有这两个相同的jquery文件（但最小化版本）：

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

秒：只需转到_Layout底部并添加：

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

第三次：on Views / Shared / EditorTemplates / tinymce_jquery_full.cshtml remove

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

请告诉我这是否对您有帮助。

雅罗

Answer 3

组合网址和脚本路径时

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>

Answer 4

在MVC3中一切都很好..但在MVC4中却没有。（对我来说至少......）

最后我开始工作了。

在_Layout.cshtml中，我不得不移动底线：

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

到顶部（头部标签内），在行之前：

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

并离开：

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

在EditorTemplate tinymce_jquery_full.cshtml文件中。

现在它在MVC3中工作得很好:) 希望我能提供帮助。

Answer 5

您可以在模型本身上添加数据注释，告诉它使用tinymce。以下是完整富文本编辑器的示例。

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

请记住，这样做会始终使此模型为新的或编辑操作呈现富文本编辑器。所以你需要在这些视图上有适当的脚本引用。

您还需要在模型中使用正确的using语句来使用System.ComponentModel.DataAnnotations。

Answer 6

你必须使用“@html.Raw（model =＆gt; model.content）”

将tinymce与asp .net MVC 4.0集成

6 个答案: